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

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

#navigation ul li {
    float:left;
}

jsFiddle here

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

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

jsFiddle here

改变导航栏CSS中按钮的宽度

1 个答案: