Question

该网站是可调整大小的，所以我不能使用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>

Answer 1

你可以添加white-space：nowrap;到您的UL元素http://jsfiddle.net/jvrCH/ 但在这种情况下，菜单元素将在没有足够空间时离开屏幕。

Answer 2

我不关心完全支持旧导航器，您可以在包含min-width的{{1}}上设置div，如：

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技巧

CSS！水平可调整大小的菜单ul li，如何在显示器的整个宽度上展开？

2 个答案: