1

我正在构建的基于 CSS 的下拉菜单存在一些问题。它是用<ul>and构建的<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中。其他对象也是 70%，所以我希望菜单的两侧与它们对齐。问题是<li>不<ul>完全填充，所以右侧未对齐。我尝试使列表项更宽，但是当它在一个屏幕上看起来不错时，项目太宽，因此“跳到”另一个分辨率较小的新行。

我已经用谷歌搜索了这个问题，并在 StackOverflow 上阅读了一些问题+解决方案，但到目前为止，两种屏幕分辨率都没有任何效果，而且我没有想法。因此，我们将不胜感激。

4

1 回答 1

1

您看到的问题是因为 CSSwidth在添加填充和边框宽度之前指定了元素的内部宽度。您可以使用以下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并非所有浏览器都支持。

JSFiddle

于 2013-04-26T14:50:34.223 回答