以下是菜单项出现在栏的一 Angular 的CSS http://jsfiddle.net/bej85/
然后我编辑了 css 并添加了
width:19em;
在 css 的 #nav ul 部分，菜单项居中。
我不太清楚为什么添加边距会使菜单项居中， 我是 css 之类的东西和 html 的新手，所以我想了解这种行为。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">
/* styles for navigation */
#nav {
background-color: #2322ff;
height: 3em;
}
#nav ul {
list-style:none;
margin:0 auto;
padding: 0;
}
#nav ul li {
font-weight: normal;
text-transform: uppercase;
float:left;
}
#nav ul li a {
display: block;
padding: .5em;
border: 1px solid #ba89a8;
border-radius: .5em;
margin: .25em;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">House</a></li>
<li><a href="">Baby</a></li>
<li><a href="">More</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<!-- end #content -->
</body>
</html>
这是 width:19em 位于 nav ul 部分时的显示方式
如果 width:19em 不存在于 nav ul 部分，则它显示如下
我想知道的是，为什么导航部分中的 width:19em 会出现这种行为。
最佳答案
这不是因为 width: 19em 而是因为 margin: 0 auto 应用于 UL 元素。
margin: 0 auto 如果应用的宽度小于其父元素的宽度，则将任何 Block 元素置于中心。
如果你不知道 UL 元素的宽度，那么使用 display: inline-block 并给 text-align: center到它的父元素。
关于html - 菜单在中心，增加宽度到导航 ul 否则在 Angular 落，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19753542/