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 here

或者，您也可以 float 元素以获得类似的效果:

#navigation ul li {
    float:left;
}

jsFiddle here

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

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

jsFiddle here