0

外部リストの箇条書きを取り戻すにはどうすればよいですか？

http://jsfiddle.net/mblase75/s9FVT/

.two-column-list {
    padding-left: 1.4em;
    list-style: outside disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}
.two-column-list li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

箇条書きのある順序付けられていないリストでCSS列を使用するとoutside disc、リスト要素のパディングに関係なく、箇条書きが消えます。

を使用して元に戻すことはできますinside discが、長い行が箇条書きで折り返されるので、これも避けたいと思います。

text-indent要素にネガを追加すること<li>も機能しません。最初の数文字を切り取るだけです。

最新バージョンのChromeを使用しています。Firefoxは影響を受けていないようです。

4

2 に答える 2

4

リスト自体を作成しながら、リスト要素に両方padding-leftとネガティブを追加すると、問題が解決するようです。text-indentlist-style: inside disc

.two-column-list {
    padding: 0 0.4em;
    list-style: inside disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}
.two-column-list li {
    padding-left: 1em;
    text-indent: -1em;
}

http://jsfiddle.net/mblase75/s9FVT/6/

于 2013-02-20T20:17:06.567 に答える
4

list-style-position: inside要素で使用できますul：

.two-column-list {
    /* all the other stuff */
    list-style-position: inside;
}

JS Fiddleデモまたはli要素について：

.two-column-list li {
    /* all the other stuff */
    list-style-position: inside;
}

（JS Fiddleデモ）。

margin-leftまたは、li要素に単純にを割り当てることができます。

.two-column-list li {
    /* all the other stuff */
    margin-left: 1em;
}

JS Fiddleデモ）。

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