我想控制子弹在<ol> 或<ul> 中将其<li> 向右推多少水平空间。
也就是说，而不是总是有
* Some list text goes
here.
我希望能够将其更改为
* Some list text goes
here.
或
*Some list text goes
here.
我环顾四周，但只能找到向左或向右移动整个块的指令，例如，http://www.alistapart.com/articles/taminglists/
【问题讨论】：
标签： html css html-lists
把它的内容放在一个相对定位的span中，然后你可以通过span的left属性来控制空间。
li span {
position: relative;
left: -10px;
}<ul>
<li><span>item 1</span></li>
<li><span>item 2</span></li>
<li><span>item 3</span></li>
</ul>【讨论】：
<SPAN> 是否可以使用id 或class 标签，请查看W3C。如果问题是它是否可以传达语义，请参阅this answer。从技术上讲，<SPAN> 标签本身是一个非语义的内联元素，但在某种程度上提供了更多的重用灵活性。如今，我相信人们可以使用inline-block 描述符来允许更大范围的格式化选项。
在这里总结其他答案 - 如果您想更好地控制 <li> 列表项中的项目符号和文本之间的空间，您的选择是：
(1) 使用背景图片：
<style type="text/css">
li {
list-style-type:none;
background-image:url(bullet.png);
}
</style>
<ul>
<li>Some text</li>
</ul>
优点：
background-position 将图像放置在与文本相关的几乎任何位置，使用像素、ems 或 %缺点：
2。在<li> 标签上使用填充
<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>
<ul>
<li>Some text</li>
</ul>
优点：
<li> 上的填充，您可以在项目符号和文本之间添加尽可能多的额外水平间距缺点：
(3) 将文本包裹在一个额外的<span> 元素中
<style type="text/css">
li {
padding-left:1em;
color:#f00; /* red bullet */
}
li span {
display:block;
margin-left:-0.5em;
color:#000; /* black text */
}
</style>
<ul>
<li><span>Some text</span></li>
</ul>
优点：
padding-top 来更改垂直位置<span>。不过，其他人可能对此有解决方法...）缺点：
希望 CSS4 中出现一些新的列表样式功能，这样我们就可以创建更智能的项目符号，而无需借助图像或额外的标记 :)
【讨论】：
outside。
display: block; 添加到 span 元素，这样换行的文本也会对齐（我最终也使用锚标签而不是 span )
应该这样做。一定要把你的子弹放在外面。如果您可以在 IE7 中向下放置它们，您也可以使用 CSS 伪元素。我真的不建议在这种事情上使用伪元素，但它确实可以控制距离。
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>【讨论】：
list-style-position: outside 并在LI 元素上进行填充可以增加项目符号点之间的距离，但在浏览器指定的偏移量之外，它仍然不起作用。见this JS Bin。
<UL> 或<LI> 上使用否定的text-indent 来否定浏览器强制在项目符号点和@ 之间的距离987654329@ 内容。即如上图增加padding-left以增加距离，减少text-indent以根据需要减少项目符号点与内容之间的距离。
<LI> 的内容换行到第二行，那么后续行最终会重新缩进在我们设法通过text-indent 为第一行撤消的边距/填充/缩进上。 叹息
老问题，但 :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>
干杯！
【讨论】：
margin-left: -5px（或任何值）将减少子弹和<li>元素之间的空间
对于list-style-type: inline：
这和 DSMann8 的答案几乎一样，但 css 代码更少。
你只需要
<style>
li:before {
content: "";
padding-left: 10px;
}
</style>
<ul>
<li>Some content</li>
</ul>
干杯
【讨论】：
list-style-position: inside，太棒了！
margin-left: -10px属性。
您可以在列表项上使用padding-left 属性（不是在列表本身上！）。
【讨论】：
list-style-position 设置为默认 outside 时有效。
<span> 元素。
如果您只想减少项目符号点和文本之间的间距，似乎有一个更清洁的解决方案：
li:before {
content: "";
margin-left: -0.5rem;
}
【讨论】：
这是另一个使用 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
}
我使用了不可破坏的空格，这样间距只会影响我的列表元素的第一行（如果列表元素的长度超过一行）。您可以在此处使用填充。
【讨论】：
在 li 上使用 text-indent 效果最好。
文本缩进：-x px；将使子弹更靠近 li，反之亦然。
在 IE 的旧版本中使用相对于负向左可能无法正常工作。 P.S- 尽可能避免提供职位。
【讨论】：
当您想将文本移近项目符号时，即使您有多行文本，以下解决方案也很有效。
margin-right 允许您将文本移近项目符号
text-indent 确保多行文本仍然正确排列
li:before {
content: "";
margin-right: -5px; /* Adjust this to move text closer to the bullet */
}
li {
text-indent: 5px; /* Aligns second line of text */
}<ul>
<li> Item 1 ... </li>
<li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
<li> Item 3 ... </li>
</ul>【讨论】：
老问题，但仍然相关。
我建议使用否定的text-indent。
list-style-position 必须是 outside。
优点：
缺点：
【讨论】：
outside（我也尝试过 inside）只是将整个 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>
【讨论】：
无序列表以 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>
【讨论】：
UL 上的文本缩进似乎只是将整个LI 向左或向右移动，包括项目符号。在类型上使用inside 或outside 似乎并没有使文本离子弹本身更近或更远。也许我做错了什么，但我不明白这是如何回答这个问题的。
您还可以使用背景图像替换作为替代方案，让您完全控制垂直和水平定位。
查看this Question的答案
【讨论】：
ul
{
list-style-position:inside;
}
定义和用法
list-style-position 属性指定列表项标记应出现在内容流内部还是外部。
来源：http://www.w3schools.com/cssref/pr_list-style-position.asp
【讨论】：
你可以给你的<li>元素一个padding-left。
【讨论】：
More info w3schools
ul {
list-style: none;
}
ul li::before {
content: "\2022";
color: black;
display: inline-block;
width: 8px;}
【讨论】：
如果您不想添加额外的标记，例如<span>，你可以使用：
list-style-position: inside; 将列表样式从左侧移近您的文本li 元素上的::before 选择器将文本移向项目符号。 ul {
list-style-type: disc;
list-style-position: inside;
padding-left: 16px; /* or margin */
}
li::before {
content: '';
margin-left: -8px;
}
【讨论】：
您可以使用ul li:before 和背景图像，并将position: relative 和position:absolute 分别分配给li 和li:before。这样您就可以创建图像并将其放置在相对于 li 的任何位置。
【讨论】：
使用padding-left:1em; text-indent:-1em 作为<li> 标签。
然后，list-style-position: inside 对应 <ul> 标签。
<ul style='list-style-position: inside;'>
<li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>
【讨论】：
如果您的列表样式是inside，那么您可以删除项目符号并创建自己的...例如（在 scss 中！）
li {
list-style: none;
&:before {
content: '- ';
}
}
如果您列出的样式是outside，那么您可以这样做：
li {
padding-left: 10px;
list-style: none;
&:before {
content: '* '; /* use any character you fancy~! */
position: absolute;
margin-left: -10px;
}
}
【讨论】：