当div宽度增加时，浏览器不会扩展

Question

我在div中有一个菜单控件。最初我将div宽度设置为100％，将min-width设置为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;
}

我假设您已将列表项显示为内联或内联块...

.maindiv li {
    display: inline-block;
}

我最后的建议是你真的想要min-width - 如果人们在下面调整浏览器的大小，那么他们将在浏览器窗口上获得一个水平滚动条，如果他们的项目更多，他们将在div上滚动条不合适。