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

我通过在列表中的每个项目上使用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; 
}

来源

2013-07-02 Nick Peelman

这是不可能回答你的任何问题，如果你不张贴一些代码。 – mohkhan

谷歌为“流体布局”。 –

谢谢Fransisco，这实际上帮了我很多！ –

您是否尝试过的列表项设置为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; 

}

来源

2013-07-02 02:40:04

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

回答

相关问题