浏览器没有扩展为div宽度增加

Question

我有一个div内的菜单控件。最初我将div宽度设置为100％，将最小宽度设置为1200px，以使其与浏览器宽度相同。菜单中的项目数量可能会根据未来的需求增加。我只是通过增加菜单中的项目来测试浏览器行为，这里的项目正在下降。我期望的是，当div宽度增加时，浏览器应该提供一个水平条，所以菜单中的所有条目都将显示在一行中。

CSS代码：

.maindiv{ position: relative;width: auto !important;width: 100%;min-width: 1200px;}

我的菜单结构

<div class="maindiv" > 
    <ul><li></li></ul> 
</div> 

Answer 1

您需要以下CSS

.maindiv { 
    position: relative; 
    width: 100%; 
    min-width: 1200px; 
    overflow: auto; 
    white-space: nowrap; 
} 

我假设你已经显示列表项as inline or inline block ...

.maindiv li { 
    display: inline-block; 
} 

而我最后的建议是你真的想min-width - 如果人们调整低于这个浏览器，那么将在浏览器窗口水平滚动条以及对DIV的滚动条，如果他们有更多的项目比适合。