我想控制子弹在<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/
当前回答
您可以使用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>
把它的内容放在一个相对定位的span中，然后你可以通过span的left属性来控制空间。
李跨度{ 位置:相对; 左:-10 px; } < ul > <李> < span >第1项< / span > < /李> <李> < span >第二项< / span > < /李> <李> < span >项3 < / span > < /李> < / ul >
对于list-style-type: inline:
它几乎和DSMann8的答案一样，但css代码更少。
你只需要
<style>
li:before {
content: "";
padding-left: 10px;
}
</style>
<ul>
<li>Some content</li>
</ul>
干杯
下面是另一个使用css计数器和伪元素的解决方案。我发现它更优雅，因为它不需要使用额外的html标记或css类:
ol,
ul {
list-style-position: inside;
}
li {
list-style-type: none;
}
ol {
counter-reset: ol; //reset the counter for every new ol
}
ul li:before {
content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}
ol li:before {
counter-increment: ol;
content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}
我使用不可分割的空格，以便空格只影响列表元素的第一行(如果列表元素超过一行长)。你可以在这里使用填充。
如果你的列表样式是在里面，那么你可以删除子弹并创建你自己的…例:(在scss!)
li {
list-style: none;
&:before {
content: '- ';
}
}
如果你的列表样式是外部的，那么你可以这样做:
li {
padding-left: 10px;
list-style: none;
&:before {
content: '* '; /* use any character you fancy~! */
position: absolute;
margin-left: -10px;
}
}
