我想控制子弹在<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/
当前回答
如果你的列表样式是在里面，那么你可以删除子弹并创建你自己的…例:(在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;
}
}
其他回答
无序列表以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>
似乎您可以(在某种程度上)使用<li>标记上的填充来控制间距。
<style type="text/css">
li { padding-left: 10px; }
</style>
问题是，它似乎不允许你像最后一个例子那样舒适地挤压它。
为此，您可以尝试关闭list-style-type并使用•
<ul style="list-style-type: none;">
<li>•Some list text goes here.</li>
</ul>
更多信息w3schools ul { list-style:没有; ｝
Ul li::before { 内容:“2022 \”; 颜色:黑色; 显示:inline-block; 宽度:8 px;}
在li上使用文本缩进效果最好。
文本缩进:-x px;会让子弹更靠近李，反之亦然。
在IE的旧版本中，在负左边使用相对span可能无法正常工作。 附注:尽量避免给出职位。
老问题了，但是: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>
干杯!
