web-dev-qa-db-ja.com

CSS3列で箇条書きが消える

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;
}
csshtml-lists
47
Andrew

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

list-style-position: inside;
81
rawb

両方を追加する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を（リストではなく）リスト要素に追加し、outside箇条書きを使用します。

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

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

19
Blazemonger

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

3
Sinister Beard

ここで最初の回答を試した後、リストの項目が2行目に溢れ、並んでいないという問題がありました。 column-gapを使用して、2番目の列を上に移動し、箇条書きを表示できました。

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

    <!– CSS CODE –>
    .two-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    -moz-column-gap: 40px;
}
2
kjw