9

私はこれに似た出力を生成しようとしています：

1. One      2. Two      3. Three      4. Four

次のHTMLコードから

<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ol>

Internet Explorerは、liを水平にするために、liをフロートさせるときに、数値（list-item）を表示したくないようです。

誰かがこれに遭遇し、私が使用できる解決策を見つけましたか？

4

7 に答える 7

8

このCSSを使用できますか？

li  {display: inline}

編集：これはアイテムの番号付けを保持しません、そして私はそうする方法を知りません。代わりに、ブラウザーがCSSカウンターをより適切にサポートするようになるまで、手動で数値を挿入するだけでよいと思います。

于 2009-02-23T20:44:59.913 に答える
8

このコードは、私がテストしたすべてのブラウザーで動作します。まだ回答が見つからない場合は、最も人気のある回答の提案が有効です。折り返したい場合は、幅を調整してください。

<ol style="list-style-type:decimal; width: 600px;">
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
</ol>

ol.horizontal{
    list-style-type: decimal;
    width: 600px;
}

ol.horizontal li{
    float: left;
    width: 200px;
    padding: 2px 0px;
}

<ol class="horizontal">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ol>
于 2009-11-06T14:34:59.747 に答える
4

私はこのページdisplayのすべてのプロパティを試しましたが、IE でリストを水平方向に表示するときに順序付けられたリスト番号を保持するものはありません (また、Windows の Firefox、Opera、または Safari でも保持されません。拡張機能としては、おそらく Google Chrome ですが、私は認めます)。そこにあるすべてのプロパティをテストしたわけではありません）。display

(部分的に - Firefox でのみ) 機能する唯一の解決策は、Al W's answerです。

水平方向の番号付きリストが必要な場合は、サーバーで生成するか、JavaScript を使用してクライアントでリストを操作して番号を再挿入する必要があると思います。

于 2009-02-23T21:10:22.507 に答える
4

さて、float、width、および list-style-type 属性を css に追加する必要があります。次のようになります。

リ{
    フロート:左;
    幅:50px;
    リスト スタイル タイプ: 10 進数;
}

具志堅

于 2009-04-09T12:48:36.590 に答える
1

インライン要素に幅を設定することはできません。だから私は通常代わりにそれらを浮かせることになります

li
{
    float: left;
    width:30px;
}
于 2009-02-23T20:48:24.990 に答える
0

css： 

li { display:inline; }
于 2009-02-23T20:44:50.990 に答える
0

IE hasLayout に関するこのページが役に立ちました。このようなリストの書式設定についての説明が含まれています (リンクはページのリスト セクションへのリンクです)。

于 2009-04-09T12:12:12.323 に答える