48

CSS3 を使用してリスト アイテムを列に変換すると、リスト アイテムの箇条書きが消えます。それを修正する方法についての理由や提案はありますか？

例を参照してください: http://jsfiddle.net/gduDm/1/

ul li {
    list-style-type: disc !important;
    column-break-inside: avoid;
}
ul {
    list-style-type: disc !important;
    margin-top: 1em;
    column-count: 2;
    column-gap: 0.5em;
}
4

5 に答える 5

83

弾丸はそこにあると思いますが、表示領域の左側にレンダリングされています。試す：

list-style-position: inside;
于 2012-06-01T18:40:33.590 に答える
20

padding-leftと負の両方をtext-indentリスト要素に追加すると、望ましい結果が得られるようです。

ul li {
    padding-left: 1em;
    text-indent: -1em;
}
ul {
    list-style: inside disc;
}

http://jsfiddle.net/mblase75/gduDm/4/

margin-leftまたは、 (リストの代わりに) リスト要素に a を追加し、outside箇条書きを使用します。

ul li {
    margin-left: 1em;
}
ul {
    list-style: outside disc;
}

http://jsfiddle.net/mblase75/gduDm/9/

于 2013-02-20T20:21:41.820 に答える
3

設定margin-left:1emにより、テキストのインデントをいじることなく箇条書きが表示されます。

于 2016-09-28T08:40:47.430 に答える
2

ここで最初の回答を試した後、リスト アイテムが 2 行目にはみ出して整列しないという問題が発生しました。を使用しcolumn-gapて、2 番目の列を移動して箇条書きを見ることができました。

ソース: http://karlikdesign.com/how-to-split-a-list-into-two-columns-with-pure-css/

    <!– CSS CODE –&gt;
    .two-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    -moz-column-gap: 40px;
}
于 2015-09-28T18:45:07.493 に答える