7

このようにコード化された簡単なメニューがあります

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a></li>
    <li><a href="#">Islands</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

このように見える ここに画像の説明を入力

各メニュー項目の間にある小さなドットは、:after 疑似要素を使用して作成されます。すべてが正常に機能していますが、ネストされたリストになるサブメニューも必要です。

問題は、このようにメニューに改行を追加するときです

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Islands</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

SafariとChromeでこの結果が得られます（Firefoxではありません）... ここに画像の説明を入力

webkit が空白を「前」として扱っているように思えます。:after 要素の CSS は次のようになります。

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;
}

white-space: normal/nowrapまた、何も影響しない ul、li、:after 要素を設定しようとしました。

どこが間違っているのか誰にもわかりますか、それとも Webkit/Firefox の問題ですか?

アップデート

http://jsfiddle.net/zmVbH/でデモを作成しました

4

1 に答える 1

5

問題は、改行が空白であり、フローティング コンテンツが行を削除することです。</a>この問題は、との間にスペースを 1 つ追加することで再現できます</li>。display:inline-blockフローティングではなく、挿入されたコンテンツを作成してみてください。

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    display:inline-block;
    text-align: center;
    border: rgba(0,0,0,0.25) 1px solid;
    white-space: normal;        
}

JSFiddleを更新しました。

OPによる更新

うん、インライン ブロックはこれを修正しますが、インライン ブロックには部分的なブラウザー サポートがあるため、それほど単純ではありません。

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;

    /* FIX */
    display:-moz-inline-stack; /* For older versions of Firefox */ 
    display:inline-block; /* Anything that supports inline-block */

    /* IE FIX */
    zoom:1;
    *display:inline; 
}
于 2011-07-12T13:27:42.340 に答える