html - ul >li 样式并保持在一行内

我正在尝试创建一个包含 4 个元素的菜单列表项，但由于某种原因它没有在一行中显示。我尝试用嵌套的 div 嵌套它但没有运气。当我添加 padding: 10px; 时，问题开始出现。

这是我拥有的最新 HTML 和 CSS:

HTML:

<div id="header">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS:

#menu {
    margin: 0;
    padding: 0;
}

#menu li {
    display: block;
    float: left;
    margin: 0;
    width: 25%;
    background-color: gray;
    padding: 10px;
}

我也有一个 jsfiddle:http://jsfiddle.net/GLh92/1/

如您所见，它不适合一行。我在这里也有响应问题。因此，它需要适合不同屏幕分辨率的一行。

知道如何以干净的方式完成这项工作吗？

最佳答案

在 li 元素上使用 box-sizing: border-box。这将使填充成为宽度计算的一部分。

http://jsfiddle.net/ExplosionPIlls/GLh92/5/

关于html - ul >li 样式并保持在一行内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15508215/