80

ulCSSリセットの適用を使用した後、リストに問題が発生しました。

のテキストliが長く、2行目に途切れる場合、テキストは箇条書きの下から始まります。箇条書きの右側のテキストと同じ余白/パディングから始めてください。

説明するのは難しいですが、example-imageを見ると。左の画像は今日のリストです。「モッタバーセル[...]」は弾丸の下から始まりますが、右の写真を見てほしいです。

CSSでこれを行うにはどうすればよいですか？私が見落としている非常に単純なものがあると思いますが、私は何を理解することができません。グーグル検索も有用なものを何も返さなかった。

ここに画像の説明を入力してください

4

3 に答える 3

174

タグには。liというプロパティがありますlist-style-position。これにより、弾丸がリストの内側または外側になります。デフォルトでは、に設定されていinsideます。これにより、テキストが折り返されます。に設定するとoutside、liタグのテキストが揃えられます。

その欠点は、弾丸がの外側のテキストと整列しないことulです。他のテキストと揃えたい場合は、余白を使用できます。

ul li {
    /*
     * We want the bullets outside of the list,
     * so the text is aligned. Now the actual bullet
     * is outside of the list’s container
     */
    list-style-position: outside;

    /*
     * Because the bullet is outside of the list’s
     * container, indent the list entirely
     */
    margin-left: 1em;
}

2014年3月15日編集 まだグーグルから人が来ているのを見て、元の答えは多少の改善が必要だと感じました

  • 解決策だけを提供するようにコードブロックを変更しました
  • インデント単位をem'sに変更しました
  • 各プロパティはul要素に適用されます
  • 良いコメント:)
于 2012-07-19T08:13:33.857 に答える
38

これが良い例です-

ul li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

作業デモ： http： //jsfiddle.net/d9VNk/

于 2012-07-19T08:10:09.120 に答える
22

Dipaksの2番目の答えですが、レイアウト制御を改善するためにulを配置する場合と配置しない場合があるため、多くの場合、テキストインデントだけで十分です。

ul li{
text-indent: -1em;
}
于 2013-09-21T16:43:10.800 に答える