Html 将li和最后一个子项的边居中

我试着把ul和li放在中间。我认为问题在于最后一个李的左边距。我试过两种方法，但似乎没有效果。有什么问题

CSS:

HTML:

首先
第二
第三
第四
第五
第六

---

我这里有它的生活：

这里有正确的CSS来做这件事：

ul {
    margin: 40px auto;
    list-style-type:none;
    text-align: center;
}

ul li {
    width: 100px;
    padding: 0px;
    margin-right: 10px;
    background-color: #f2f2f2;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-family: verdana;
    font-size:10px;
    color: #666
}

---

基本上我把

文本对齐：居中ul

上的code>。您还有一些其他不需要的东西，例如设置其宽度和

float:left在您的
li
s.
上，ul不应该是650px宽：5x110+1x100吗？另请参见您所写的。对不起，我错了！！！这真是太好了！非常感谢。在您的情况下，不需要最后一个孩子？在左侧，它显示一个边距，使其不完全居中。我不明白为什么？。它不会出现在Fiddle中，但会出现在普通html和JBin:和CodePen中：我认为您的解决方案非常好，但需要在ul和ul li:最后一个子项{margin right:0px；}中添加填充0以完全居中：
<ul>
  <li> first </li>
  <li> second </li>
  <li> third </li>
  <li> fourth </li>
  <li> fifth </li>
  <li> sixth </li>
</ul>

ul {
    margin: 40px auto;
    list-style-type:none;
    text-align: center;
}

ul li {
    width: 100px;
    padding: 0px;
    margin-right: 10px;
    background-color: #f2f2f2;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-family: verdana;
    font-size:10px;
    color: #666
}