我在中描述了我原来的问题这个线程 https://stackoverflow.com/questions/16521330/css-ul-ol-incorrect-indent-with-custom-counter.
简而言之,当在 UL 中使用自定义计数器时,文本缩进被破坏。
马克·奥德特 https://stackoverflow.com/users/564353/marc-audet提出了一个非常优雅的解决方案,我在代码中实现了它。
现在 - 毫不奇怪 - 如果列表应该围绕图像浮动,那么这不起作用:-(
您可以在这里看到问题:http://cssdesk.com/eEvwn http://cssdesk.com/eEvwn
数字位于图像的顶部。
再次强调:毫不奇怪,他们毕竟是绝对定位的。
所以。
有没有办法解决这个问题,或者我是否必须告诉我的客户这在技术上是不可能的,从而让他不高兴?
再次感谢您抽出时间来回答。
如果您需要更多信息,请告诉我。
我重新审视了之前的解决方案并对 CSS 进行了一些修改,如下所示。
对于顶级列表:
ol.custom {
margin-left: 0;
padding-left: 0px;
counter-reset: counter_level1;
list-style: none outside none;
display: block;
line-height: 18px;
width: 500px;
}
ol.custom li {
list-style: none;
margin: 0 0 0 0;
padding: 0 0 0 20px;
outline: 1px dotted blue;
overflow: hidden;
}
ol.custom li:before {
display: inline-block;
width: 20px;
margin-left: -20px;
content: counter(counter_level1)". ";
counter-increment: counter_level1;
font-weight: bold;
}
对于嵌套列表:
ol.custom ol {
margin: 0 0 0 0;
padding: 0 0 0 0;
counter-reset: counter_level2;
}
ol.custom ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 0 40px;
}
ol.custom ol li:before {
display: inline-block;
width: 40px;
margin-left: -40px;
content: counter(counter_level1, decimal)"." counter(counter_level2, decimal)". ";
counter-increment: counter_level2;
}
本质上,我删除了绝对定位的伪元素,因为它们在浮动内容附近不起作用。
但是,由于伪元素的负边距,标签仍然可能与浮动图像重叠,因此添加overflow: hidden
到顶层li
样式,这会创建一个新的块格式化上下文,以解决重叠问题。
缺点:根据您的内容和浮动图像,您可能会获得一些大块的空白,如我的新演示所示:
http://jsfiddle.net/audetwebdesign/buXKy/ http://jsfiddle.net/audetwebdesign/buXKy/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)