我正在动态生成包含有序列表的网页.该页面包含10个项目,并使用属性“start”相应地对项目进行编号.具有’list-style-position：outside’的通用有序列表对于项目编号小于1000的项目非常适用.
当项目编号的长度为4位或更多时,问题就出现了,项目编号的一部分被容器边界部分遮挡.调整列表填充并不是一个真正的解决方案,因为对于具有比填充调整后要处理的更多位数的项目计数,它仍将中断,以及由于过度填充而使单个数字项看起来很糟糕.
使用’list-style-position：inside’解决了项目编号被遮挡的问题,但引入了一个新问题,因为这样做会导致项目内容包装在列表项目编号下,而不是对齐到数字的右侧.
我总是可以隐藏项目编号,并在每个< li>内部引入一个新的浮动div.并将内容设置为列表项目编号,但虽然这解决了我的演示文稿问题,但在语义上它不太正确,因为我纯粹出于表现的原因添加标记和内容.
对于我不知道的这种困境,有没有css解决方案？
#container {
border: solid;
}
#container div, #container h1 {
border: solid 1px blue;
}
#outsideOl {
list-style-position: outside;
}
#insideOl {
list-style-position: inside;
padding-left: 0;
}
one
the content inside the <li> is aligned to the right of the numbers, which is what I want, but long numbers are obscured by the container's border. The list elements are shifted to the right by the default padding for an <ol> element. If the list item number happens to be longer than the padding, part of the number is obscured.- two
- three
- four
- five
- six
- seven
one
long numbers affect content flow and as such are left aligned to the container border (which is good because they are no longer obscured). The problmen now is the block content inside the li gets bumped down to the next line, and left aligns with the numbers. Curse you css!- two
- three
- four
- five
- six
- seven
2924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
