Html 左对齐列表编号和文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14347290/
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
Left align both list numbers and text
提问by dmr
I'd like to left align both the numbers and the text in my <ol>. This is what I'm trying to accomplish:
我想左对齐我的<ol>. 这就是我想要完成的：
For now, each <li>contains an <a>, but that can change. So far I tried putting left padding and then a text-indent on the <a>.
目前，每个都<li>包含一个<a>，但可以改变。到目前为止，我尝试在<a>.
Here is my code as of now.
这是我目前的代码。
HTML:
HTML：
<ol class="dinosaurs">
<li><a>Dinosaur</a></li>
<li><a>Tyrannosaurus</a></li>
<li><a>Camptosaurus</a></li>
</ol>
CSS:
CSS：
.dinosaurs{
list-style-position: inside;
}
NOTE: I'm viewing the webpage in Chrome 23 on Windows 7.
注意：我正在 Windows 7 上的 Chrome 23 中查看网页。
回答by ford
This seems to work:
这似乎有效：
.dinosaurs { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before {
content: counter(item) ". ";
counter-increment: item;
width: 2em;
display: inline-block;
}
回答by gotohales
You could position the list elements like so:
您可以像这样定位列表元素：
.dinosaurs {
list-style-position: inside;
}
.dinosaurs li{
position: relative;
}
.dinosaurs li a {
position: absolute;
left: 30px;
}
which would yield http://jsfiddle.net/wBjud/2/
回答by ShadSterling
None of the existing answers worked for me, but by combining and building on them I found similar method that does, including for multiline entries, without requiring any tags inside list items:
现有的答案都不适合我，但是通过组合和构建它们，我发现了类似的方法，包括多行条目，不需要列表项中的任何标签：
ol {
counter-reset: item;
}
li {
display: block;
margin-left: 1.7em;
}
li:before {
content: counter(item) ". ";
counter-increment: item;
position: absolute;
margin-left: -1.7em;
}
Which looks like this: https://jsfiddle.net/b3dayLzo/
看起来像这样：https: //jsfiddle.net/b3dayLzo/
I think it works by putting the li:beforein the left margin of the li.
我认为它的工作原理是把li:before中的左边空白处li。
You may want a different margin-left.
你可能想要一个不同的margin-left.
There's no class on the olbecause in my case this appears within the style of the container.
没有类，ol因为在我的情况下，它出现在容器的样式中。
回答by alanmoo
Try adding padding-left: 0;to your style, and changing list-style-position:to outsideif necessary.
尝试添加padding-left: 0;您的风格，并在必要时更改list-style-position:为outside。
回答by j08691
You can fake it by using positioning, padding and margins.
您可以通过使用定位、填充和边距来伪造它。
.dinosaurs {
list-style-position: inside;
position:relative;
margin-left: -20px;
}
a {
position:absolute;
left:70px;
}
回答by Max van Kampen
If you use list-style-position: inside;the number is placed inside the block of text. To adjust the position of the number and keep ident of the text use this css.
如果使用list-style-position: inside;数字，则将其放置在文本块内。要调整数字的位置并保持文本的标识，请使用此 css。
ol {
list-style: none;
counter-reset: step-counter;
padding-inline-start: 25px;
}
ol > li {
counter-increment: step-counter;
}
ol > li:before {
content: counter(step-counter)".";
display: inline-block;
position: absolute;
margin-left: -25px;
}
To keep your bullets also to the left
为了让你的子弹也向左
ul {
list-style: none;
padding-inline-start: 25px;
}
ul > li:before {
content: 'cf';
position: absolute;
margin-left: -25px;
}
