Question

我在构建基于css的下拉菜单时遇到了一些问题。它是使用<ul>和<li>构建的，我希望它占据屏幕的70％，所以我将以下内容放在css中：

.m_wrapper {
    position:relative;
    width:100%;
    display:block;
    padding:0;
    margin:0px 0px 10px 0px;
}
.menu * {
    position:relative;
}
.m_wrapper ul {
    position:relative;
    width:70%;
    margin:0 auto;
    display:table;
    height:20px;
    padding:0;
    list-style-type:none;
}
.m_wrapper li {
    position:relative;
    width:20%;
    float:left;
    padding: 5px 0px 5px 5px;
    border: 1px solid blue;
    height:20px;
}

我把它放在JFiddle here中，还有一些其他元素也出现在页面上。其他对象也是70％，所以我希望菜单的两侧与它们对齐。问题是<li>没有完全填充<ul>，因此右侧未对齐。我尝试使列表项更宽，但是当它在一个屏幕上看起来很好时，项目太宽，因此“跳下”到另一个分辨率较小的新行。

我已经用Google搜索了问题，并在StackOverflow上阅读了几个问题+解决方案，但到目前为止，两个屏幕分辨率都没有任何效果，而且我没有想法。所以非常感谢帮助。

Answer 1

您遇到的问题是因为在添加填充和边框宽度之前，CSS width指定了元素的内部宽度。您可以使用box-sizing属性更改此内容：

width:25%; /* because you have four menu items */
box-sizing:border-box; /* include border width and padding in element width */
-moz-box-sizing:border-box; /* For FF */

请注意，box-sizing为not supported in all browsers。

JSFiddle

动态填充ul

1 个答案: