CSS！水平可调整大小的菜单ul li，如何将其展开到显示器的全宽？
该网站是可调整大小的，所以我不能使用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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以添加空白：nowrap;到您的 UL 元素 http://jsfiddle.net/jvrCH/
但在这种情况下，当空间不足时，菜单元素将离开屏幕。
You can add white-space: nowrap; to your UL element http://jsfiddle.net/jvrCH/
But in this case menu elements will go off screen when not enough space.
如果您不关心完美支持旧的导航器，您可以在包含的
div上设置一个min-width，例如：您可以在按钮上执行相同的操作（并且使用
display:block和float:left来保留margin-top/bottom、padding-top/bottom和height工作）：最后到纠正浮动问题（如果所有子元素都处于浮动状态，则父元素会折叠）：
您可以依靠 overflow:hidden 技巧。 info/css-clearfix.html" rel="nofollow">clearfix 解决方案
I you don't care about perfectly supporting old navigators, you could set a
min-widthon your containingdivlike :And you could do the same on your buttons (and use
display:blockandfloat:leftto keepmargin-top/bottom,padding-top/bottomandheightworking):And finally to correct the float issue (Parent element collapses if all children are in float) :
Instead of using the
overflow:hiddentrick, you could rely on the clearfix solution