CSS: margin right:自动行为怪异

Question

HTML：

        <ul id="menu">
            <li><a href="#">Categories 1</a>
                <ul id="cat1">
                    <li class="first"><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
        </ul>

CSS：

#menu {
  background-color: #0000FF;
  height: 20px;
  padding: 15px 0 10px;
  margin: 5px;
  font: 12px Tahoma;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: inset 0px 0px 10px #000;
  text-align: center;
} 

#menu > li{
  display: inline;
}
li a {
  color: #fff;
  text-decoration: none;
}

.first{
  margin-top: 12px;
}

#cat1 > li{
  display: block;
  background-color: #0000FF;
  width: 150px;
  margin-right: auto;
}

#cat1 > li > a{
  display: block;
  padding: 10px;
  box-shadow: inset 0px 0px 2px #000;

}

当我在#cat > li中使用margin-left: auto时，它工作正常。另一方面，margin-right:auto没有获得全部利润，我不明白为什么会这样。

这是我的小提琴：http://jsfiddle.net/ZfN7t/25/

感谢您的帮助！

Answer 1

也许你应该设置文本对齐内嵌块，也许文本对齐:居中，并重置<ul>第二级的页边距/填充:)

http://jsfiddle.net/ZfN7t/26/

ul {
    margin:0 auto;
    padding:0;
}
#menu > li {
    display: inline-block;
}

Answer 2

删除html元素的默认填充，它应该会像预期的那样工作。

ul,li
{
    margin:0;padding:0;
}