CSS边距：0自动不在li＆gt; 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＆gt; li＆gt; 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

<{1}}上的

余量正在有效，但由于li有a，因此其行为为自动宽度。

如果您确定只有2个菜单项，则可以从li中删除float:left并将float添加到第一个li

float:left

<强> DEMO

或者将ul li:first-child{ float: left; } 添加到width:50%

li

<强> Demo 2