web-dev-qa-db-ja.com

リスト用のクロスブラウザー互換ハンギングインデント

ぶら下げインデントを制御しようとしている順不同リストがあります。 2行にオーバーフローするアイテムでは、テキストの2行目を前のテキスト行のすぐ下に配置します(箇条書きの下ではありません)。私はこれをChrome私が望む通りに動作させることができました。しかし、FirefoxとInternet Explorerでは少しずれています。

現在私が持っているものは次のとおりです。

<ul style="list-style: disc inside none; margin-left: 0; padding-left: 1em; text-indent: -1em;">
<li>50 – 180</li>
<li>950 – 2150</li>
<li>Dual IF: 70/140, L-Band & L-Band monitor (standard)</li>
</ul>

これをすべてのブラウザーで同じレンダリングにする方法はありますか?

25
Austin

削除する text-indent、 変化する list-styleoutsideに追加し、padding-leftli要素に:

ul {
    list-style: disc outside none; 
    margin-left: 0; 
    padding-left: 1em;
}
li {
    padding-left: 1em;
}
37
Natalie Banegas

Fontello箇条書きを使用していたので、受け入れられた答えに追加しなければならなかった唯一のことは、テキストインデントでした。

ul {
    list-style: disc outside none;
    margin-left: 0; 
    padding-left: 1em;
    text-indent: -2em;
}

li{
    padding-left: 1em;
}
2

CSSを最初にリセット を使用し、それに応じてCSSを調整します。