我正在使用乔恩·达克特 (Jon Duckett) 的 HTML 和 CSS 一书中所示的确切 html 示例创建一个液体布局示例，如下所示-
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}
body {
width: 90%;
margin: 0 auto;
min-width: 400px;
}
#content {
overflow: auto;
}
#nav,
#feature,
#footer {
margin: 1%;
}
.column1,
.column2,
.column3 {
width: 31.3%;
float: left;
margin: 1%;
}
.column3 {
margin-right: 0%;
/* No effect anyway as float is left */
}
li {
display: inline;
padding: 0.5em;
}
#nav,
#footer {
background-color: #efefef;
padding: 0.5em 0;
}
#feature,
.article {
height: 10em;
margin-bottom: 1em;
background-color: #efefef;
}<!DOCTYPE html>
<html>
<head>
<title>Liquid Layout</title>
</head>
<body>
<div id="header">
<h1>Logo</h1>
<div id="nav">
<ul>
<li id="home"><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li id="contact"><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<div class="article column1">
<p>Column One</p>
</div>
<div class="article column2">
<p>Column Two</p>
</div>
<div class="article column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2011</p>
</div>
</body>
</html>全屏查看时，ul 列表没有完全位于 div 的中心。
我想，为了让 div 居中，我应该做两件事
- 定义一个小于容器的宽度。
- 将边距设置为
0 auto
因此，我将 ul 元素宽度设置为 70%，并将边距设置为 0 auto。
然而，下面代码片段中的结果产生了一个奇怪的结果。
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}
body {
width: 90%;
margin: 0 auto;
min-width: 400px;
}
#content {
overflow: auto;
}
#nav, #feature, #footer {
margin: 1%;
}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;
}
.column3 {
margin-right: 0%;
/* No effect anyway as float is left */
}
ul {
width: 70%;
margin: auto;
}
li {
display: inline;
padding: 0.5em;
}
#nav, #footer {
background-color: #efefef;
padding: 0.5em 0;
}
#feature, .article {
height: 10em;
margin-bottom: 1em;
background-color: #efefef;
}<!DOCTYPE html>
<html>
<head>
<title>Liquid Layout</title>
</head>
<body>
<div id="header">
<h1>Logo</h1>
<div id="nav">
<ul>
<li id="home"><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li id="contact"><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<div class="article column1">
<p>Column One</p>
</div>
<div class="article column2">
<p>Column Two</p>
</div>
<div class="article column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2011</p>
</div>
</body>
</html>所有的填充都丢失了，列表仍然没有完全居中。 我做错了什么？
最佳答案
你需要添加一个 padding-left:0px; 到 ul。这是 Web 自动提供的样式默认值——向 ul 元素添加填充。
这是我电脑的截图。 chrome 浏览器在下面给出了 ul 的默认样式。
关于html - 在 div 示例中居中内联列表不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45680964/