CSSマージン：0自動で動作しません>

Question

その要素（li> a）が中央にあるナビゲーションバーが必要です。 私はフロートの左のスタイルだけを達成しました。

#wrapper { 
 
    width: 900px; 
 
    margin: 0 auto; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
ul>li>a { 
 
    display: block; 
 
    padding: 14px 16px; 
 
    color: #fff; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin: 0 auto; 
 
    font: 18px Inconsolata; 
 
} 
 
/* fdfdf */ 
 

 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    border-radius: 20px; 
 
} 
 
ul>li:hover { 
 
    background: #111; 
 
} 
 
li>a.active { 
 
    background-color: #4CAF50; 
 
    color: #fff; 
 
}

<div id='wrapper'> 
 
    <ul> 
 
    <li><a class='active' href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Blog</a> 
 
    </li> 
 
    </ul> 
 
</div>

あなたは私がUL> LI>に入れて見たよう {マージン：0自動;}

なぜそれが機能しないのですか？

ナビゲーションバー：

Answer 1

https://jsfiddle.net/h933o3jy/

あなたはliインライン要素にする必要があるだろうし、それの親がtext-align:centerを経由して、それを中央にする必要があります。そのよう：

#wrapper{ 
width:900px; 
margin:0 auto; 
text-align:center; 
} 

li { 
    display:inline-block; 
} 

UDPATE

あなたはそれらのliの項目の間にスペースがあるとわかります。それらを取り除くには、これらのタグがと一緒に接着された形でHTMLを構築します。たとえば、https://jsfiddle.net/h933o3jy/1/</li><li>

Answer 2

余裕はaですが、liはfloat:leftであるため、自動幅として動作しています。あなたは李からfloat:leftを削除し、最初のLi

ul li:first-child{ 
     float: left; 
} 

DEMO

にフロートを追加したり、追加することができます唯一の2メニュー項目を持っていることについて確実な場合

width:50%からli

li{ 
    float:left; 
    width:50% 
} 

Demo 2