DIV没有环绕它的子元素？

Question

所以这是我的代码：

#headerMenu_outer #headerMenu_inner
{
    background-color:#333333;
}
#headerMenu_outer #headerMenu_inner li
{
    padding-left:15px;
    padding-right:15px; 
    text-align:center;
    font-size:13px;
    font-weight:bold;
    display:inline;
    color:#00FF33;
    background-color:#00CCCC;
    cursor:pointer;
}

我希望headerMenu_inner在headerMenu_outer中居中。通常，“margin-left：auto”和“margin-right：auto”有效。但是，headerMenu_inner占用了headerMenu_outer的整个宽度。反正有没有让它不那样做？我希望它能像李的需要那样广泛。

谢谢

Answer 1

#headerMenu_inner很可能是块级元素，因此会占用尽可能多的水平空间。为该元素指定宽度，然后执行边距技巧，例如margin: 0 auto以此为中心。

如果你想让它像LI一样宽，（在我的头顶之外）设置LI元素不包裹，然后将“inner”元素设置为display: inline-block。