Html 将div示例中的内联列表居中不起作用

我正在使用Jon Duckett的《html和CSS》一书中的html示例创建一个如下所示的液体布局示例-

*{
字体系列：Arial，Verdana，无衬线；
颜色：#665544；
文本对齐：居中；
}
身体{
宽度：90%；
保证金：0自动；
最小宽度：400px；
}
#内容{
溢出：自动；
}
#导航，
#特写，
#页脚{
利润率：1%；
}
.第1栏，
.第2栏，
.专栏3{
宽度：31.3%；
浮动：左；
利润率：1%；
}
.专栏3{
右边距：0%；
/*由于只剩下浮点数，因此不会产生任何效果*/
}
李{
显示：内联；
填充：0.5em；
}
#导航，
#页脚{
背景色：#EFEF；
填充：0.5em0；
}
#特写，
.文章{
高度：10公分；
边缘底部：1米；
背景色：#EFEF；
}

液体布局
标志







特征

第一栏

第二栏

第三栏

&抄袭；版权所有2011

您需要添加一个

左填充：0px到ul。这是web自动提供的一种默认样式——向ul元素添加填充

这是我电脑上的截图。chrome浏览器为ul提供以下默认样式

只需通过添加以下内容删除
ul
元素的默认填充：

#nav > ul {
  padding: 0
}

完整片段：


*{
字体系列：Arial，Verdana，无衬线；
颜色：#665544；
文本对齐：居中；
}
身体{
宽度：90%；
保证金：0自动；
最小宽度：400px；
}
#内容{
溢出：自动；
}
#导航，
#特写，
#页脚{
利润率：1%；
}
#导航>ul{
填充：0
}
.第1栏，
.第2栏，
.专栏3{
宽度：31.3%；
浮动：左；
利润率：1%；
}
.专栏3{
右边距：0%；
/*由于只剩下浮点数，因此不会产生任何效果*/
}
李{
显示：内联；
填充：0.5em；
}
#导航，
#页脚{
背景色：#EFEF；
填充：0.5em0；
}
#特写，
.文章{
高度：10公分；
边缘底部：1米；
背景色：#EFEF；
}

液体布局
标志







特征

第一栏

第二栏

第三栏

&抄袭；版权所有2011

无需更改宽度。只需将左填充：0添加到ul即可。这应该可以解决问题了。填充物还在那里。你失去的是ul上以前的垂直边距。如果您检查两个代码段上的元素并查看#nav内部的ul，您将看到填充实际上是ul的边距。