如何通过CSS保持有序列表中第二行的缩进？
ker*_*cht 241 html css html-lists
我希望有一个"内部"列表,列表项目符号或十进制数字都与高级文本块齐平.第二行列表条目必须与第一行具有相同的缩进!
例如:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis,
1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
CSS为其"list-style-position"提供了两个值 - 内部和外部.使用"内部"第二行与列表点齐平,而不是使用上级行:
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
我的列表中的"外部"宽度不再与高级文本块齐平.
实验宽度text-indent,padding-left和margin-left适用于无序列表,但它们对于有序列表失败,因为它取决于list-decimal的字符数:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor.
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
11. Text
12. Text
"11." 和"12." 与"3"相比,不优于文本块.和"4.".
那么关于有序列表和二线缩进的秘密在哪里？谢谢你的努力!
use*_*621 252
更新
这个答案已经过时了.你可以更简单地做到这一点,正如我所指出的那样,我很惊讶地发现这还没有解决.您可以使用浏览器的表格布局算法(不使用表格),如下所示:
ul {
list-style-position: outside;
}
请参阅https://www.w3schools.com/cssref/pr_list-style-position.asp
原始答案
ol {
counter-reset: foo;
display: table;
}
ol > li {
counter-increment: foo;
display: table-row;
}
ol > li::before {
content: counter(foo) ".";
display: table-cell; /* aha! */
text-align: right;
}
演示:http://jsfiddle.net/4rnNK/1/
要使其在IE8中工作,请使用:before带有一个冒号的旧表示法.
- 很好,但你如何控制<li>底部保证金？<li>的高度仅由其中的表格单元格的高度决定.因此,这些元素上的边距,填充和高度无效.如何解决这个限制？ (5认同)
- 您还可以通过在生成的内容上使用`<li>`和`position:absolute`上的`position:relative`来避免不稳定的表格.有关示例,请参见http://jsfiddle.net/maryisdead/kgr4k/. (3认同)
- 如果您有多行列表项,并且需要一致的垂直间距,解决方案是向ol选择器添加垂直边框间距,例如border-spacing:0 3px; 表格单元格上的正常填充不起作用,因为该数字始终只有一行. (3认同)
- 这非常糟糕... LI 之后的边距不起作用 - 我们基本上搞乱了 li 的“显示”模式，它不再是一个有效的元素来抓取该行。您需要根据@ChuckLeButt 的回答解决这个问题 (3认同)
- @Perelli`foo`只是一个任意字符串(id),它用于连接`counter-reset`,`counter-increment`和`counter()`属性. (2认同)
- @maryisdead为什么`40px`？[当计数器比那个更宽时会破坏](http://imgur.com/DeXXld7).使用表格布局的重点是浏览器会自动适应内容. (2认同)
小智 205
我相信这会做你想要的.
.cssClass li {
list-style-type: disc;
list-style-position: inside;
text-indent: -1em;
padding-left: 1em;
}
JSFiddle:https://jsfiddle.net/dzbos70f/
- @loremmonkey这很快又脏,但不是真正的解决方案.首先,`1em`不等于缩进的空间.线条不会完美地按像素对齐.第二,当列表达到数字10时呢？100？文本缩进不起作用,不会对齐.这个答案应该是低估的. (23认同)
- 如果你还添加padding-left:1em更好; (21认同)
- 到目前为止,这是本页所有解决方案的最佳答案.它比其他人方便得多.如果您对选择哪个答案犹豫不决,请选择此答案. (16认同)
- @loremmonkey缩进不是'1em`.http://oi60.tinypic.com/a0eyvs.jpg第一个列表项使用上面的文本缩进技术.与list-style-position通常看起来的情况相比:在这种情况下,在它之外它没有对齐,在像素之外. (2认同)
Chu*_*utt 36
没有任何黑客攻击的最简单,最干净的方法就是缩进ul(或ol),如下:
ol {
padding-left: 40px;
list-style-position: outside; // Only necessary if you've set it to "inside" elsewhere
}
这给出了与接受的答案相同的结果:https://jsfiddle.net/af2fqryz/
截图:
- 您可能需要将 `list-style-position: outside` 应用到 `<li>`。 (3认同)
小智 24
检查这个小提琴:
它显示了如何使用CSS手动缩进ul和ol.
HTML
<head>
<title>Lines</title>
</head>
<body>
<ol type="1" style="list-style-position:inside;">
<li>Text</li>
<li>Text</li>
<li >longer Text, longer Text, longer Text, longer Text second line of longer Text </li>
</ol>
<br/>
<ul>
<li>Text</li>
<li>Text</li>
<li>longer Text, longer Text, longer Text, longer Text second line of longer Text </li>
</ul>
</body>
CSS
ol
{
margin:0px;
padding-left:15px;
}
ol li
{
margin: 0px;
padding: 0px;
text-indent: -1em;
margin-left: 1em;
}
ul
{
margin:0;
padding-left:30px;
}
ul li
{
margin: 0px;
padding: 0px;
text-indent: 0.5em;
margin-left: -0.5em;
}
我也编辑了你的小提琴
记下它.
- 有21个人甚至认真吗？这不起作用.自发布以来,您不确定是否更改了代码. (2认同)
您可以设置一个ol或ul在CSS中的边距和填充
ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
我相信你只需将列表'bullet'放在填充之外.
li {
list-style-position: outside;
padding-left: 1em;
}
小智 5
您可以使用CSS选择范围；在这种情况下，您需要列出项目1-9：
ol li:nth-child(n+1):nth-child(-n+9)
然后适当调整这些第一项的边距：
ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }
在此处查看其运行情况：http : //www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
我的解决方案与Pumbaa80的解决方案完全相同，但我建议使用display: table代替display:table-rowforli元素。所以它会是这样的：
ol {
counter-reset: foo; /* default display:list-item */
}
ol > li {
counter-increment: foo;
display: table; /* instead of table-row */
}
ol > li::before {
content: counter(foo) ".";
display: table-cell;
text-align: right;
}
所以现在我们可以在li's之间使用边距
下面的 CSS 做到了这一点：
ul {
margin-left: 1em;
}
li {
list-style-position: outside;
padding-left: 0.5em;
}