49

順序付けされていないリストを含むhtmlファイルがあります。リストアイテムを水平に表示したいのですが、それでも箇条書きは保持します。何をしようとしても、水平方向の要件を満たすためにスタイルをインラインに設定すると、箇条書きを表示できません。

4

13 に答える 13

39

他の回答で見た最良のオプションは、を使用することfloat:left;でした。残念ながら、ここでの要件である IE7 では動作しません* — それでも弾丸は失われます。背景画像の使用にもあまり熱心ではありません。

代わりに私がやろうとしていること（他の誰も提案していないため、自己回答）は•、これをスタイリングするのではなく、手動でhtmlに追加することです。理想的とは言えませんが、私が見つけた中で最も互換性のあるオプションです。

edit : *現在の読者は、元の投稿日に注意してください。IE7 が問題になることはほとんどありません。

于 2008-08-29T16:34:13.280 に答える
24

私は同じ問題を抱えていましたが、Internet Explorer (私はバージョン 7 をテストしました) でのみ発生し、Firefox 3 または Safari 3 では発生しませんでした。:beforeセレクターを使用するとうまくいきます。

ul.tabs li {
  list-style: none;
  float: left;
}
ul.tabs li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

ここでは四角いブレットを使用していますが、通常のブレット \2022 でも同じように機能します。

于 2008-10-14T16:03:52.920 に答える
9

<li> 要素で背景画像を使用して、テキストが重ならないようにパディングを使用することもできます。

li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}
于 2008-08-29T15:06:13.523 に答える
4

スタイル プロパティ「display」が最初に「list-item」に設定されているため、ブラウザは箇条書きを表示します。表示プロパティを「インライン」に変更すると、リスト項目が取得するすべての特別なスタイルがキャンセルされます。:before セレクターと content プロパティを使用してシミュレートできるはずですが、IE (少なくともバージョン 7 まで) はそれらをサポートしていません。背景画像でそれをシミュレートすることは、おそらくそれを行うための最良のクロスブラウザーの方法です.

于 2008-08-29T15:54:47.883 に答える
3

表示をブロックしたままにし、幅を与えて左にフロートさせます。

これはインラインのようなもので、リスト スタイルを維持する必要があります。

于 2008-08-29T16:07:56.963 に答える
2

私はちょうどいじっていましたが、同じブラウザの制約で同じ問題に遭遇しました。回答を検索したところ、回答のない投稿が表示されました。これはおそらく手遅れですが、後世のために投稿する必要があると思いました。

問題を解決するために私がしたことは、最初のリストの各リスト項目内に 1 つの項目を持つ別のリストを埋め込むことだけでした。そのようです...

HTML:

<div class="block-list">
  <ul>
    <li><ul><li>a</li></ul></li>
    <li><ul><li>b</li></ul></li>
    <li><ul><li>c</li></ul></li>
  </ul>
</div>

CSS:

.block-list > ul > li { display: inline; float: left; }

IE7 ページ:

    o a o b o c

...それはばかげた解決策ですが、うまくいくようです。

于 2015-12-08T23:52:12.810 に答える
1

試着float: leftしました<li/>か？このようなもの：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        ul li {
            float: left;
            margin-left: 2em;
        }
    </style>
</head>
<body>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</body>
</html>

私は Firefox 3.0.1 のみをテストしましたが、そこで動作します。marginそうしないと、箇条書きが前のアイテムと重なるため、が設定されます。

追加: アイテムをフロートするときは、通常の流れからアイテムを削除することに注意してください。これにより、<ul/>の高さがなくなります。境界線などを追加したい場合は、奇妙な結果が得られます。

これを修正する 1 つの方法は、スタイルに以下を追加することです。

ul {
    overflow: auto;
    background: #f0f;
}
于 2008-08-29T15:02:37.710 に答える
0

Character エンティティを使用できます。参照を参照してください: http://dev.w3.org/html5/html-author/charref

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>
于 2015-03-12T11:45:31.547 に答える
-1

次のコードを使用できます

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
于 2013-03-25T04:23:23.617 に答える