3

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

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

知道如何以干净的方式完成此操作吗？

4

6 回答 6

5

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

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

于 2013-03-19T19:04:13.650 回答
4

查看 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+ */
}
于 2013-03-19T19:04:12.413 回答
1

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

  1. 删除填充<li>
  2. 添加padding: 10px;到<a>
  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;
}
于 2013-03-19T19:05:44.383 回答
0

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

于 2013-03-19T19:03:57.097 回答
0

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

试试这个：

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

它将位于同一行之下。这是你要找的吗？

于 2013-03-19T19:04:42.777 回答
0

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

将宽度的值更改为其他行 15%

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

}

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

于 2013-03-19T19:07:22.287 回答