Question

我正在创建一个液体布局示例，如下所示，使用 HTML和CSS作者Jon Hartett

一书中显示的确切html示例

＆＃13;

* {
  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;
}

＆＃13;

<!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>&copy; Copyright 2011</p>
  </div>
</body>

</html>

＆＃13;

全屏查看时，ul列表并不完全位于div的中心。我想，为了使div居中，我应该做两件事

定义小于容器的宽度。
将保证金设为0 auto

因此，我将ul元素宽度设置为70％，将边距设置为0 auto。然而，下面的片段中的结果会产生奇怪的结果。

＆＃13;

		* {
			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;
		}

＆＃13;

<!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>&copy; Copyright 2011</p>
	</div>
</body>
</html>

＆＃13;

所有填充都丢失了，列表仍未完全居中。我做错了什么？

Answer 1

您需要在ul中添加padding-left:0px;。它是Web自动提供的样式默认值 - 为ul元素添加填充。

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

Answer 2

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

#nav > ul {
  padding: 0
}

完整摘录：

＆＃13;

* {
  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%;
}
#nav > ul {
  padding: 0
}
.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;
}

＆＃13;

<!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>&copy; Copyright 2011</p>
  </div>
</body>

</html>

＆＃13;

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

2 个答案: