296

からすべてのインデントを削除したいul。margin、、paddingをに設定してみtext-indentまし0たが、役に立ちませんでした。負の数に設定text-indentするとうまくいくようですが、それがインデントを削除する唯一の方法ですか？

4

9 に答える 9

477

リストスタイルと左パディングを何も設定しません。

ul {
    list-style: none;
    padding-left: 0;
}​


ul {
  list-style: none;
  padding-left: 0;
}
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

list-style: none弾丸を維持するために、 list-style-position: insideまたは省略形を置き換えることができますlist-style: inside：

ul {
  list-style-position: inside;
  padding-left: 0;
}


ul {
  list-style-position: inside;
  padding-left: 0;
}
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

于 2012-12-18T18:25:06.643 に答える
103

<ul>インデントを削除するための私の好ましい解決策は、単純なCSSワンライナーです。

ul { padding-left: 1.2em; }
<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

このソリューションは軽量であるだけでなく、複数の利点があります。

  • <ul>の箇条書きを周囲の通常の段落テキストにうまく左揃えします（= <ul>のインデントを削除します）。
  • <li>要素内のテキストブロックは、複数行に折り返されている場合でも正しくインデントされたままになります。

レガシー情報：
IEバージョン8以下の場合、代わりにmargin-leftを使用する必要があります。

    ul { margin-left: 1.2em; }
于 2014-10-06T09:57:54.003 に答える
10

display:table-row;インデントも削除しますが、箇条書きは削除されます。

于 2015-08-13T08:45:03.020 に答える
8

これをCSSに追加します。

ul { list-style-position: inside; }

これにより、li要素が他の段落やテキストと同じインデントに配置されます。

参照：http ：//www.w3schools.com/cssref/pr_list-style-position.asp

于 2014-07-02T16:11:35.160 に答える
7

パディングを削除します。

padding-left: 0;
于 2012-12-18T18:17:12.750 に答える
4

リンクを教えていただけますか？ありがとう私は見ることができますおそらくあなたのcssセレクターは十分に強くないか、あなたは試すことができます

padding:0!important;

于 2012-12-18T18:16:36.707 に答える
4

分割しようとしているフッターでも同じ問題が発生します。上記の提案をいくつか組み合わせて試してみると、これでうまくいくことがわかりました。

footer div ul {
    list-style-position: inside;
    padding-left: 0;
}

これは私のh1の下の左側にそれを保持しているようで、箇条書きは左側の外側ではなく、divの内側を指しています。

于 2015-01-28T20:50:44.453 に答える
4

ライブデモ：https ：//jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

元の質問はその要件について不明確であるため、他の回答で設定されたガイドラインの範囲内でこの問題を解決しようとしました。特に：

  • リストの箇条書きを外側の段落テキストに揃える
  • 同じリストアイテム内の複数の行を揃える

また、使用するパディングの量についてブラウザが同意することに依存しないソリューションも必要でした。完全を期すために、順序付きリストを追加しました。

于 2017-05-03T14:37:30.047 に答える
2

これをインラインで行い、マージンを0（ul style = "margin：0px"）に設定しました。箇条書きは、オーバーハングなしで段落と整列します。

于 2019-01-20T03:52:37.970 に答える