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;

}

当我在margin-left: auto中使用#cat > li时，这是令人担忧的。另一方面margin-right:auto没有获得全部保证金，我不明白为什么会这样。

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

感谢您的帮助！

Answer 1

Mayb你应该设置<li> inline-block，也许是text-align：center并重置<ul>第二级的margin / padding：）

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;
}

<强> FIDDLE

CSS：margin-right：自动表现怪异

2 个答案: