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;

}

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

1 个答案: