CSS！水平可调整大小的菜单ul li，如何将其分布在显示器的整个宽度上？答案

【问题标题】：CSS! Horizontal resizable menu ul li, how to spread it on full width of the display?CSS！水平可调整大小的菜单ul li，如何将其分布在显示器的整个宽度上？
【发布时间】：2012-01-20 15:47:38
【问题描述】：

站点是可调整大小的，所以我不能使用px，有时最后一个项目会出现问题，当窗口变小时它们会掉下来，如何避免这种情况？让我们看看我的单页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>li menu</title>
</head>

<body>
<style>
div {
    width: 100%;
    height: 3%;
    background: red;
    opacity: 0.7;
}
ul {
    width:100%;
    list-style:none;
    padding: 0;
    margin: 0;
}

ul li {
 background-color:yellow;
 display: inline;
 text-align: center;
 width:30%;
}
</style>
<div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
    </ul>
</div>

</body>
</html>

【问题讨论】：

“当窗口变小时它们会掉下来” - 在这种情况下你想对它们发生什么？
他们保持在线并且只改变他们的宽度
是的，但是当它们达到一定宽度时，将没有足够的空间让它们再调整大小。在这种情况下会发生什么？

标签： html css menu resizable

【解决方案1】：

您可以添加空格：nowrap;到您的 UL 元素 http://jsfiddle.net/jvrCH/ 但在这种情况下，当空间不足时，菜单元素会离开屏幕。

【讨论】：

谢谢你的空白，但这只是问题的一半。

【解决方案2】：

如果您不关心完美支持旧导航器，您可以在包含 div 上设置一个 min-width 像：

div {
    /* current css */
    min-width:960px; /* which is the current minimum width for designing website for desktops */
}

你也可以在你的按钮上做同样的事情（并使用display:block和float:left保持margin-top/bottom、padding-top/bottom和height工作）：

ul li {
    /* current css */
    display:block; /* default display for list elements, could be omitted */
    float:left;
    width:30%;
    max-width:125px;
    min-width:50px;
}

最后纠正浮动问题（如果所有子元素都处于浮动状态，则父元素崩溃）：

ul {
    /* current css */
    overflow:hidden
}

您可以依赖clearfix 解决方案，而不是使用overflow:hidden 技巧

【讨论】：