动态填充ul

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>，所以右侧没有对齐。我试着让列表项变宽，但当它在一个屏幕上看起来很好时，这些项太宽了，因此在另一个屏幕上以较小的分辨率“跳到”新的一行。

我已经在谷歌上搜索了这个问题，并在StackOverflow上阅读了一些questions+solutions，但到目前为止，在两种屏幕分辨率上都没有什么效果，我也没有想法。因此，我们将非常感谢您的帮助。

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