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 が nav ul セクションに存在しない場合は、以下のように表示されます コーナーのメニュー 。

4

1 に答える 1

0

それは原因ではありませんが、要素に適用されてwidth: 19emいるためです。margin: 0 autoUL

margin: 0 auto親要素の幅よりも小さい幅が適用されている場合、ブロック要素を中央に移動します。

UL要素の幅がわからない場合は、それを使用して親要素にdisplay: inline-block渡します。text-align: center

于 2013-11-03T13:42:47.133 に答える