我想控制子弹在<ol>或<ul>中向右推动<li>的水平空间。
也就是说，不是一直都有
* Some list text goes
here.
我希望能把它变成
* Some list text goes
here.
or
*Some list text goes
here.
我环顾四周，但只能找到将整个街区向左或向右移动的说明，例如http://www.alistapart.com/articles/taminglists/
当前回答
有趣的是，当我们面对这样的问题时，我们大多数人都会使用边距、填充和/或位置属性。我知道我以前是这样的。如果我们都看错了呢?
在提供不同的解决方案之前，让我们试着更好地理解浏览器实现。如果我们看一下WebKit中列表的用户代理样式表，我们会发现:
ul, menu, dir {
//...
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
ol {
//...
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
li {
display: list-item;
text-align: match-parent;
}
其他浏览器也类似。列表缩进由ul和ol的填充提供，而不是li。同样值得注意的是，在任何地方都找不到负定位、空白或缩进。那么是什么造成了子弹和文字之间的差距呢?
只有当我们尝试改变项目符号本身时，答案才会变得清晰。我将使用list-style-type属性来做到这一点，但不是给它一个像disc这样的标准值(它的定义由浏览器决定，在规范中有点模糊)，我将给它一个带引号的字符串值:
申{ list-style-type:●; 的 <德> < li >哦亲爱的< / li > < li > < / li >发生了什么事 <li>到子弹发射器?< / li > < /德>
我们可以通过在项目符号后面添加一个标准空格字符来重新引入空格。”
ul。custom-bulleted { List-style-type:“•”; ｝ < ul类= " custom-bulleted " > <li>啊，好多了 <li>我从来不喜欢粘性子弹 < / ul > < ul > <li>我是一个无风格的列表 我从来没有那个问题!李< / > < / ul >
我只能假设这类似于浏览器内部所做的事情——在项目符号之后插入空格，并基本上将整个内容浮动到每一里的最左边。实际上，规范通过将默认的内部实现与@counter-style at-rule进行比较来证实这一点，@counter-style at-rule允许我们定义自己的列表类型:
下面的样式表片段提供了的规范定义 这些预定义的计数器样式: @反风格光盘{ 系统:循环; 符号:\ 2022; /*•*/ 后缀:" "; ｝
空格就在后缀中。
There's one unanswered question though… Why does the unstyled list look different to the custom-bulleted class in my example? Again, it seems to come down to each browser's different internal implementation. If you compare them in different browsers, even the custom bullets vary between browsers. What I have found though, is that you can standardise the appearance of a string list-style-type simply by declaring a font-family on li::marker, a feature that wasn't available to us when this question was originally asked.
所以，回到最初的问题，如果我们想控制项目符号和li之间的空格，我们可以通过改变空白字符的宽度，或者通过使用基于字符串的list-style-type添加多个空白字符来实现，这得到了广泛的浏览器支持。或者，我们可以使用@counter-style定义一个自定义列表样式，但Safari目前不支持这种样式。
Unicode为我们提供了大量的空白字符供我们选择。以下是使用Em Space (U+2003)的列表:
ul { list-style-type:“002003•\”; ｝ < ul > 我喜欢大差距，我不能说谎 你们这些兄弟不能否认 < / ul >
I know this approach is not the first one that springs to mind. We've been so used to aligning things with margins, padding and indents that we tend to reach for those tools every time. But in many ways, the browser's way makes sense. What could be simpler than indenting the whole list with a single padding declaration on the ul, and letting the bullet take care of itself? (Maybe one day, the li::marker pseudo-element will support padding, for those who reckon they need even more fine-grained control. I won't be holding my breath though.)
其他回答
这个应该可以了。一定要把子弹对准外面。你也可以使用CSS伪元素，如果你可以在IE7中向下放置它们。我真的不推荐使用伪元素来做这种事情，但它确实可以控制距离。
ul { list-style: circle outside; width: 100px; } li { padding-left: 40px; } .pseudo, .pseudo ul { list-style: none; } .pseudo li { position: relative; } /* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */ .pseudo li:before { content: '\2192'; position: absolute; left: 0; } <ul> <li>Any Browser really</li> <li>List item <ul> <li>List item</li> <li>List item</li> </ul> </li> </ul> <ul class="pseudo"> <li>IE8+ only</li> <li>List item <ul> <li>List item with two lines of text for the example.</li> <li>List item</li> </ul> </li> </ul>
把它的内容放在一个相对定位的span中，然后你可以通过span的left属性来控制空间。
李跨度{ 位置:相对; 左:-10 px; } < ul > <李> < span >第1项< / span > < /李> <李> < span >第二项< / span > < /李> <李> < span >项3 < / span > < /李> < / ul >
您可以使用ul li:before和背景图像，并分别将position: relative和position:absolute分配给li和li:before。通过这种方式，您可以创建一个图像，并将其定位到任何您想要相对于li的位置。
无序列表以ul标记开始。每个列表项以 默认情况下，列表项将用项目符号(小黑圈)标记:
<!DOCTYPE html>
<html>
<body>
<h2>Normal List </h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
输出:
<!DOCTYPE html>
<html>
<body>
<h2>Normal List </h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
text-indent属性指定文本块中第一行的缩进。 注:允许为负值。如果值为负，第一行将向左缩进。
<ul style='text-indent: -7px;'>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
老问题了，但是:before伪元素在这里工作得很好。
<style>
li:before {
content: "";
display: inline-block;
height: 1rem; // or px or em or whatever
width: .5rem; // or whatever space you want
}
</style>
它工作得非常好，不需要太多额外的规则或html。
<ul>
<li>Some content</li>
<li>Some other content</li>
</ul>
干杯!
