Question

以下是一个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>

以下是宽度：19em在nav ul部分中的显示方式 menu at centre

如果nav ul部分中没有width：19em，则显示如下 menu at corner 我想知道的是为什么宽度的这种行为：导航部分中的19em。

Answer 1

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

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

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

菜单在中心添加宽度到导航ul否则在角落

1 个答案: