0

list-style-type: disk と、それぞれ 2 つのフローティング div を持ついくつかの li を持つ単純な順序付けられていないリストがあります。問題は、Webkit ブラウザー (Safari、Chrome...) でのみ、箇条書きがリストの右側に表示されることです。

添付のスクリーンショットとこのフィドルを参照してください

コードは次のとおりです。

<ul>
    <li class="cf">
        <span class="left">Text1:</span>
        <span class="left">00,00 &euro;</span>
    </li>

    <li>
        <span class="left">Text2:</span>
        <span class="left">00,00 &euro;</span>
    </li>

    <li>
        <span class="left">Text3:</span>
        <span class="left">00,00 &euro;</span>
    </li>

    <li>
        <span class="left">Text4:</span>
        <span class="left">00,00 &euro;</span>
    </li>
</ul>
4

4 に答える 4

3

私がコメントで言うように、あなたは試すことができます：display:inline-block;

ここに動作する Fiddleがあります。

IE7 のサポートが必要な場合は、only-IE7 css を追加してくださいdisplay:inline。これにより、IE7 がインライン ブロックを理解できるようになります。

css を 1 つだけ使用している場合は、次の方法を試すことができます。*:first-child + html ul li {display:inline;} /* only for IE7 */

IE8 はインライン ブロックを適切にサポートします ;)

于 2013-06-10T07:50:16.247 に答える
1

私が理解している場合は、ul liではなく にフロートul li .leftを追加float: leftし、各項目が別の行に表示されるように追加します。そうしないと、各 li の内容が黒丸を越えて左にフロートします。

フロート移動で jsfiddle を更新ul li: http://jsfiddle.net/JjrU3/3/

于 2013-06-10T07:39:09.687 に答える
0

目標が列を模倣することである場合は、 の代わりに を使用display: inline-blockします。あなたのliの幅がその最高のコンテンツと等しいことを確認する必要があります. そうしないと、列が重なりますul li.leftfloat: left

フィドル

于 2013-06-10T07:51:23.870 に答える
0

2 つのスパンがフローティングするとバグが発生するため、最初のスパンを float で定義し、2 番目のスパンを display:inline-block で定義します。スパンに表示を使用できます：

ul li .leaf {display:inline-block}
于 2013-06-10T07:51:47.483 に答える