我想控制子弹<li>在<ol>或中向右推动多少水平空间<ul>。
也就是说，不是总有
* Some list text goes
here.我希望能够将其更改为
* Some list text goes
here.要么
*Some list text goes
here.我环顾四周，但只能找到将整个块向左或向右移动的说明，例如，http：//www.alistapart.com/articles/taminglists/
Answers:
将其内容放在span相对位置的，然后可以通过的left属性控制空间span。
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>在这里总结其他答案–如果您希望更好地控制<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中具有一些新的列表样式功能，因此我们可以创建更智能的项目符号，而无需使用图像或exta标记：）
outside。
display: block;到span元素，这样换行的文本也才能排成一行（我也最终使用了定位标记而不是span）
这应该做。确保将子弹放到外面。如果您可以将CSS伪元素向下放入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>text-indent在<UL>或上使用负号<LI>可否定浏览器在项目符号和<LI>内容之间的强制距离。即，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，这太棒了！
在li上使用text-indent效果最佳。
文字缩进：-x px; 会将子弹移近li，反之亦然。
在span上使用relative负号可能不适用于IE的旧版本。PS-尽量避免出任职位。
这是使用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
}我使用不可中断的空格，以便间距仅影响列表元素的第一行（如果列表元素长于一行）。您可以在此处使用填充。
无序列表以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>旧问题，但仍然有意义。我建议使用负数text-indent。
list-style-position必须是outside。
优点：
缺点：
看来您可以（某种程度上）使用<li>标记上的填充来控制间距。
<style type="text/css">
li { padding-left: 10px; }
</style>要注意的是，它似乎不允许您像最后一个示例那样费劲地压缩它。
为此，您可以尝试关闭列表样式类型并使用＆bull;。
<ul style="list-style-type: none;">
<li>•Some list text goes here.</li>
</ul>ul
{
list-style-position:inside;
} 定义和用法
list-style-position属性指定列表项标记应出现在内容流的内部还是外部。
资料来源：http : //www.w3schools.com/cssref/pr_list-style-position.asp
您可以使用ul li:before和背景图像，并分配position: relative和position:absolute向li和li:before，分别。这样，您可以创建图像并将其放置在相对于li的任何位置。
当您要将文本移到更靠近项目符号时，以下解决方案效果很好，即使有多行文本。
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>
<span style="display: flex;">在每个内部使用<li>。