以下是从栏的角落出现的一个 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 ,则显示如下