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/

或者,将 a 添加margin-left到列表元素(而不是列表)并使用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

在这里尝试了第一个答案之后,我的列表项溢出到第二行并且没有排队时遇到了问题。使用column-gap我能够将第二列移动并查看项目符号。

资料来源: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 回答
1

其他一些解决方案相当不错,但我尝试的所有解决方案都给我带来了各种副作用。我做了一些小的调整,并试图让它尽可能接近完美。

ul {
  column-count:2;
}

ul.solution {
  margin-left:-0.6em;
  margin-right:0.6em;
}

ul.solution > * {
  margin-left:0.6em;
  margin-right:-0.6em;
}
Experimental Group
<ul class="solution">
 <li>
  This solution is pretty similar to the others.
 </li>
 <li>
  It does not require you to put the bullets inside, so you can keep your left edge clean if you want. 
 </li>
 <li>
  This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
 </li>
</ul>
Control Group
<ul>
 <li>
  This solution is pretty similar to the others.
 </li>
 <li>
  It does not require you to put the bullets inside, so you can keep your left edge clean if you want. 
 </li>
 <li>
  This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
 </li>
</ul>

于 2019-09-20T17:55:13.017 回答