0

以下是从栏的角落出现的一个 CSS 菜单项 http://jsfiddle.net/bej85/

我编辑了css并添加了

width:19em;

在 CSS 的#nav ul 部分中，菜单项居中。

http://jsfiddle.net/bej85/1/

我不太清楚为什么添加边距会使菜单项居中，我对 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 ，则显示如下

4

1 回答 1

0

那不是因为，width: 19em而是因为margin: 0 auto应用于UL元素。

margin: 0 auto如果应用的宽度小于其父元素的宽度，则将任何 Block 元素置于中心。

如果您不知道UL元素宽度，请使用display: inline-block它并提供text-align: center给它的父元素。

于 2013-11-03T13:42:47.133 回答