html - 将列表宽度更改为窗口大小

Question

我通过在列表中的每个元素上使用 float: left; 样式创建了一个水平菜单栏。当我调整浏览器屏幕大小时，它们会垂直堆叠并弄乱我的布局。是否可以改为更改其宽度？

编辑

列表:

<div id="menu">
<ul class="menu nav-tabs">
        <li class="active"><a href="#"><span class="first-tab">Startpagina</span></a></li>
        <li><a href="#"><span>Historiek</span></a></li>
        <li><a href="#"><span>Bestuur</span></a></li>
        <li><a href="#"><span>Jeugdwerking</span></a></li>
        <li><a href="#"><span>Ploegen</span></a></li>
        <li><a href="#"><span>ActiviteitenKalender</span></a></li>
        <li><a href="#"><span>Pers</span></a></li>
        <li><a href="#"><span>Wegbeschrijving</span></a></li>
        <li><a href="#"><span>Foto Albums</span></a></li>
        <li><a href="#"><span>Uitslagen(Archief)</span></a></li>
        <li class="last"><a href="#"><span>Uitslagen regioploegen(Archief)</span></a></li>
    </ul>
            </div>

CSS:

div#menu li {
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: block;
float: left;
}

Answer 1

您是否尝试过将列表项设置为display: inline-block？

DEMO

* {
  margin: 0;
  padding:0;
}

div#menu{
  white-space: nowrap;
}
div#menu li {
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: inline-block;

}