Html 如何通过CSS在有序列表中保持第二行的缩进？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10428720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep indent for second line in ordered lists via CSS?
提问by kernfrucht
I want to have an "inside" list with list bullets or decimal numbers being all flush with superior text blocks. Second lines of list entries have to have the same indent like the first row!
我想要一个“内部”列表，其中的列表项目符号或十进制数字都与高级文本块齐平。列表条目的第二行必须与第一行具有相同的缩进！
E.g.:
例如：
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 provides only two values for its "list-style-position" - inside and outside. With "inside" second lines are flush with the list points not with the superior line:
CSS 仅为其“列表样式位置”提供两个值 - 内部和外部。“内部”第二行与列表点齐平，而不是与上一行齐平：
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
Width "outside" my list is not flush with superior text blocks anymore.
我的列表“外部”的宽度不再与高级文本块齐平。
Experiments width text-indent, padding-left and margin-left work for unordered lists but they fail for ordered lists because it depends on the list-decimal's number of characters:
实验 width text-indent、padding-left 和 margin-left 适用于无序列表，但它们对有序列表失败，因为它取决于列表十进制的字符数：
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." and "12." aren't flush with the superior text block compared to "3." and "4.".
“11。” 和“12”。与“3”相比，不与高级文本块齐平。和“4.”。
So where's the secret about ordered lists and the second-line-indent? Thank's for your effort!
那么关于有序列表和二行缩进的秘密在哪里呢？谢谢你的努力！
回答by user123444555621
Update
更新
This answer is outdated. You can do this a lot more simply, as pointed out in another answer below:
这个答案已经过时了。正如下面的另一个答案所指出的，您可以更简单地执行此操作：
ul {
list-style-position: outside;
}
See https://www.w3schools.com/cssref/pr_list-style-position.asp
见https://www.w3schools.com/cssref/pr_list-style-position.asp
Original Answer
原答案
I'm surprised to see this hasn't been solved yet. You can make use of the browser's table layout algorithm (without using tables) like this:
我很惊讶地看到这个问题还没有解决。您可以像这样使用浏览器的表格布局算法（不使用表格）：
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;
}
Demo: http://jsfiddle.net/4rnNK/1/
演示：http: //jsfiddle.net/4rnNK/1/
To make it work in IE8, use the legacy :beforenotation with one colon.
要使其在 IE8 中工作，请使用:before带有一个冒号的旧符号。
回答by JTOrlando
I believe this will do what you are looking for.
我相信这会做你正在寻找的。
.cssClass li {
list-style-type: disc;
list-style-position: inside;
text-indent: -1em;
padding-left: 1em;
}
JSFiddle: https://jsfiddle.net/dzbos70f/
JSFiddle：https://jsfiddle.net/dzbos70f/
回答by Chuck Le Butt
The easiest and cleanest way, without any hacks, is to just to indent the ul(or ol), like so:
最简单、最干净的方法，没有任何技巧，就是缩进ul(或ol)，像这样：
ol {
padding-left: 40px; // Or whatever padding your font size needs
list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}
This gives the same result as the accepted answer: https://jsfiddle.net/af2fqryz/
这给出了与接受的答案相同的结果：https: //jsfiddle.net/af2fqryz/
Screenshot:
截屏：
回答by Deepan Babu
Check this fiddle:
检查这个小提琴：
It shows how to manually indent ul and ol using CSS.
它展示了如何使用 CSS 手动缩进 ul 和 ol。
HTML
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
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;
}
Also I edited your fiddle
我也编辑了你的小提琴
Make a note of it.
记下它。
回答by luke2012
You can set the margin and padding of either an olor ulin CSS
您可以在 CSS 中设置 anol或的边距和填充ul
ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
回答by KnownColor
I believe you just need to put the list 'bullet' outside of the padding.
我相信您只需要将列表“项目符号”放在填充之外。
li {
list-style-position: outside;
padding-left: 1em;
}
回答by LaFaucon
You can use CSS to select a range; in this case, you want list items 1-9:
您可以使用 CSS 来选择一个范围；在这种情况下，您需要列出项目 1-9：
ol li:nth-child(n+1):nth-child(-n+9)
Then adjust margins on those first items appropriately:
然后适当调整这些第一项的边距：
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; }
See it in action here: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
在这里查看它的实际效果：http: //www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
回答by Alex
my solution is quite the same as Pumbaa80's one, but I suggest to use display: tableinstead of display:table-rowfor lielement.
So it will be something like this:
我的解决方案与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;
}
So now we can use margins for spacing between li's
所以现在我们可以在li's之间使用边距
回答by itoctopus
The following CSS did the trick:
下面的 CSS 做到了这一点：
ul{
margin-left: 1em;
}
li{
list-style-position: outside;
padding-left: 0.5em;
}
回答by Corey Ballou
I'm quite fond of this solution myself:
我自己非常喜欢这个解决方案：
ul {
list-style-position: inside;
list-style-type: disc;
font-size: 12px;
line-height: 1.4em;
padding: 0 1em;
}
ul li {
margin: 0 0 0 1em;
padding: 0 0 0 1em;
text-indent: -2em;
}
