我在this thread中描述了我原来的问题 简而言之,在UL中使用自定义计数器时,文本缩进就会破坏 Marc Audet提出了一个非常优雅的解决方案,我在我们的代码中实现了。
现在 - 这并不奇怪 - 如果列表应该浮动图像,这不起作用: - (
您可以在此处查看问题:http://cssdesk.com/eEvwn
数字位于图像的顶部。 再说一遍:毫无疑问,它们绝对是绝对定位的。
因此。 有没有办法解决这个问题,或者我是否必须告诉他技术上不可能让我的客户不高兴?
再次感谢您抽出宝贵时间回答。
如果您需要更多信息,请告诉我。
答案 0 :(得分:1)
我重新访问了我之前的解决方案,并对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
样式,这会创建一个新的块格式处理过度问题的背景。
下行:根据您的内容和浮动图像,您可以获得一些大块的空白区域,如我的新演示所示:
答案 1 :(得分:0)
我想从你发布的CSSdesk中你想要缩进与底部面板中的缩进类似。
首先,您希望数字不在文本中。您可以通过设置与宽度匹配的margin-left来获得此结果:
ol.wrong li:before {
....
width: 20px;
margin-left: -20px
}
ol.wrong ol li:before {
width: 40px;
margin-left: -40px;
}
由于剩余边距与宽度相同,因此不占空间。
并且,要调整全球位置,请设置:
ol.wrong ol li {
margin-left:15px;
}
在原始代码中,这是保证金权利。我会说这是一个错误,调整边距似乎没有意义