html - 更改导航栏 CSS 中按钮的宽度

Question

所以我的html是这样的：

<div id="background">
    <div id="navigation">
    <ul>
        <li>Home</li>
        <li>About Us</li>
    </ul>
</div>

我的CSS是这样的：

#background {
    min-widh: 960px;
}

#navigation {
    min-width: 960px;
} 

#navigation ul {
    min-width: 960px;
} 

#navigation ul li {
    display: inline;
    width: 100px;
    height: 50px;
    background-color: red;
} 

现在，这确实创建了一个内联栏，除非我改变了多少宽度和高度

#navigation ul li

背景颜色（红色）只是严格地围绕在字母周围，没有别的。无论我将其更改为什么数字，实际 li 的宽度和高度似乎都没有改变。知道为什么要这样做吗？

Answer 1

改为使用display:inline-block或display:inline。

#navigation ul li {
    display: inline-block;
}

jsFiddle在这里

或者，您也可以浮动元素以获得类似的效果：

#navigation ul li {
    float:left;
}

jsFiddle在这里

除了上述两种解决方案之外，如果您想使用display:inline，您可以只添加填充而不是尝试设置高度/宽度。

#navigation ul li {
    display:inline;
    padding:20px;
}

jsFiddle在这里