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か?

デモ

* {
  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;

}