html - 动态填充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 上阅读了一些问题和解决方案，但到目前为止，两种屏幕分辨率都没有任何效果，我没有想法。因此，我们将不胜感激。

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