Question

我正在尝试创建一个包含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/

如您所见，它不适合一行。我在这里也有回应关注。因此，它需要在一条线内适合不同的屏幕分辨率。

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

Answer 1

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

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

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+ */
}

Answer 3

解决方案是将填充添加到<a>标记，而不是<li>标记，因为填充会增加实际宽度。

从<li>
将padding: 10px;添加到<a>
关闭<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;
}

Answer 4

填充为元素添加宽度和/或高度，您应该使用li元素的子元素处理填充或边距。

Answer 5

当您提到padding:10px;时，它也会增加<li>项的宽度。所以你需要照顾width:20%;

试试这个：

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

它将属于同一条线。这是你在寻找什么？

Answer 6

问题是您要将每个li元素的宽度设置为25％。你有四个列表元素，只要没有填充就可以了（25 * 4 = 100）但是当你添加填充时，其中一个元素移动到下一行。（25 * 4 + 10（填充）＆gt; 100）

将宽度值更改为其他行15％

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

}

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

ul＆gt; li style并将其保持在一行内

6 个答案: