0

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;

}

When i use margin-left: auto in #cat > li it is woring properly. margin-right:auto on the other hand doesn't get the full margin, and I don't understand why this is.

Here's my fiddle: http://jsfiddle.net/ZfN7t/25/

Thank you for any and all help!

4

2 回答 2

1

也许你应该设置<li>inline-block ，也许 text-align:center 并重置第二级的边距/填充<ul>:)

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

ul {
    margin:0 auto;
    padding:0;
}
#menu > li {
    display: inline-block;
}
于 2013-06-30T10:19:45.137 回答
0

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

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

小提琴

于 2013-06-30T10:23:19.430 回答