样式设置ul>li的样式并保持在同一行内

Question

我将翻译以下内容，涉及IT技术。内容包含一个菜单列表项，其中有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/，你可以看到它不能在一行内完全显示。此外，我还有一个响应式布局的问题，因此需要适应不同屏幕分辨率并在一行内显示。你有什么好的办法以更加简洁的方式实现吗？

- tugberk

---

首先，关闭你的锚点标签。 - kingkode

@McMastermind 那是一个打字错误。已经修正。 - tugberk

Answer 1

在 li 元素上使用 box-sizing: border-box，这样填充部分将被包括在宽度计算中。

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

- Explosion Pills

---

这种情况怎么办？http://jsfiddle.net/GLh92/365/有什么方法可以保持在同一行吗？ - Max

Answer 2

了解一下box-sizing CSS属性，它将改变你的生活。

#menu li {
    display: inline-block;
    float: left;
    margin: 0;
    width: 25%;
    background-color: gray;
    padding: 10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

- Jason Lydon

Answer 3

解决方案是将内边距添加到 <a> 标签中，而不是 <li> 标签中，因为内边距会增加实际宽度。

1. 从 <li> 中删除内边距
2. 在 <a> 中添加 padding: 10px;
3. 关闭您的 <a> 标签

http://jsfiddle.net/GLh92/7/

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;
}

#menu li a {
    display: block;
    padding: 10px;
}

- Axel

Answer 4

当你提到 padding:10px; 时，它也会增加 <li> 元素的宽度。因此，你需要注意 width:20%;。

试试这个：

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

它将出现在同一行。这是你要找的吗？

- Radhakrishna Rayidi

---

@Axel也有不同的解决方案来解决你的问题。 - Radhakrishna Rayidi

Answer 5

问题在于您将每个li元素的宽度设置为25％。 您有四个列表元素，只要没有填充就可以（25 * 4 = 100）。但是当您添加填充时，其中一个元素会移动到下一行。（25 * 4 + 10（填充）> 100） 将宽度的值更改为其他值，例如15％。

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

}

http://jsfiddle.net/GLh92/9/

- Tomarinator

---

谢谢，但这不是解决方案。我想要用4个项目完全填充该行，并且我还想使其对不同的屏幕分辨率具有响应性。请参见已接受的答案。 - tugberk

Answer 6

内边距可以为元素添加宽度和/或高度，您应该使用li元素的子元素来处理内边距或外边距。

- Gabor