css - 浏览器没有随着 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 上的滚动条，如果他们的项目多于适合的话。