1

リンクを含むタグで構成された水平メニューバーがある<li>ので、メニュー項目は次のようになります。

<li>
 <a href="...link...">
  <span>Some text</span>
 </a>
</li>

メニューバーが画面より広くなるまで、問題なく表示されます。これが発生し、最後のメニュー項目に1つ以上の単語が含まれている場合、この項目の2番目の単語がバーのすぐ下に折り返されます。画面をさらに小さくすると、全体<li>が下の行に折り返されるため、正常に機能します。

<li>タグには、いくつかのCSSスタイルが適用されています。

display:block;
padding:5px;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;

<li>アイテムに幅を明示的に設定すると、下の行に折り返し全体の希望する動作を得ることができ<li>ます。ただし、これらはすべて設計上サイズが異なるため、これは実行したくありません。

何か案は？

4

2 に答える 2

3

追加white-space:nowrap;

li > a > span
{
    white-space:nowrap;
}

これにより、アイテムのテキストが1行に保持されます。

于 2009-11-17T14:43:16.457 に答える
2

使用する

li span {
    white-space: nowrap;
}

子セレクターはまだすべてのブラウザーでサポートされていないため、子セレクター（li> a> span）ではありません。

于 2009-11-17T14:49:55.437 に答える