html - 水平ナビゲーションメニューの複数単語のliを1行にとどめる方法はありますか？

Question

私はいくつかのHTMLを持っています：

<nav>
    <ul>
        <li>Menu Item One</li>
        <li>Menu Item Two</li>
        <li>Menu Item Three</li>
    </ul>
</nav>

これは、水平メニューとしてスタイル設定されています。私のリストのリンクの数は、ナビゲーションが2行にドロップダウンする必要があるようなものです。しかし、私はそれが李中の場所に落ちることを望まない。つまり、私のリンクはマルチワードであるため、アイテムの途中にドロップする傾向があります。次の行が常に<li>要素の間の場所にあるように強制するこれを行う方法はありますか？

Answer 1

white-space:nowrap;liにcssを追加するだけです

Answer 2

おそらく、次のように、li-itemsのスペースをノーブレークスペースに置き換えてみることができます。

<nav>
    <ul>
        <li>Menu&nbsp;Item&nbsp;One</li>
        <li>Menu&nbsp;Item&nbsp;Two</li>
        <li>Menu&nbsp;Item&nbsp;Three</li>
    </ul>
</nav>

Answer 3

nav li {display:block; float:left; white-space:pre;}

こちらのインターフェースを参照してください：http： //jsfiddle.net/3h9Kw/