CSS邊距：0自動不在li> a上工作

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> a {margin：0 auto;}

為什么不起作用？

導航欄：

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上a邊距正在工作但由於li有float:left它表現為自動寬度。

如果您確定只有2個菜單項，則可以刪除float:left從li float:left並將float添加到第一個li

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

DEMO

或者添加width:50%到li

li{
  float:left;
  width:50%
}

演示2