CSS：项目符号和<li>之间的控制空间
我想要控制一个子弹在<ol>或<ul>中将<li>向右移动多less个水平空间。
那就是，而不是总是有
* Some list text goes here.
我希望能够改变这一点
* Some list text goes here.
要么
*Some list text goes here.
我环顾四周，但只能find指示左右移动整个块，例如， http://www.alistapart.com/articles/taminglists/
将其内容放置在相对定位的span中，然后可以通过span的left属性来控制空间。
<!DOCTYPE html> <html lang="en"> <head> <title>SO question 4373046</title> <style> li span { position: relative; left: -10px; } </style> </head> <body> <ul> <li><span>item 1</span></li> <li><span>item 2</span></li> <li><span>item 3</span></li> </ul> </body> </html>
总结其他答案在这里 – 如果你想更好地控制项目符号和<li>列表项中的文本之间的空间，你的select是：
（1）使用背景图片：
<style type="text/css"> li { list-style-type:none; background-image:url(bullet.png); } </style> <ul> <li>Some text</li> </ul>
优点：
- 你可以使用你想要的任何图像的子弹
- 您可以使用CSS
background-position将图像放置在相对于文本的任何位置，使用像素，ems或％
缺点：
- 添加一个额外的（尽pipe很小）的图像文件到您的页面，增加页面的重量
- 如果用户在其浏览器上增加文本大小，则子弹将保持原始大小。 随着文字大小的增加，它也可能会进一步偏离立场
- 如果您仅使用百分比来开发“响应式”布局，则可能很难在子屏幕宽度范围内准确find子弹的位置
2.在<li>标签上使用填充
<style type="text/css"> ul {padding-left:1em} li {padding-left:1em} </style> <ul> <li>Some text</li> </ul>
优点：
- 没有图像= 1个文件下载
- 通过调整
<li>上的填充，可以在子弹和文本之间添加任意多余的水平空间 - 如果用户增加文本大小，则间距和子弹大小应按比例缩放
缺点：
- 无法将子弹移近文本而不是浏览器默认值
- 限于CSS内置子弹types的形状和大小
- 项目符号必须与文本颜色相同
- 无法控制子弹的垂直定位
（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>
优点：
- 没有图像= 1个文件下载
- 与选项（2）相比，您可以更好地控制子弹的位置 – 您可以将其更靠近文本（尽pipe尽我所能，尽pipe如此，您还是无法通过向
<span>添加padding-top来改变垂直位置<span>。其他人可能有一个解决方法，虽然…） - 子弹可以是与文本不同的颜色
- 如果用户增加他们的文本大小，项目符号应按比例缩放（如果您将填充和页边距设置为ems而不是px）
缺点：
- 需要一个额外的非语义元素（这可能会让你失去更多的朋友，比现实生活中的更多）;但是对于那些喜欢他们的代码的人来说，要尽可能的精益和高效，并且违背了表示和内容的分离该HTML / CSS应该提供）
- 无法控制子弹的大小和形状
这里希望CSS4中有一些新的列表样式的function，所以我们可以创build更聪明的项目符号，而不需要使用图片或exta mark-up 🙂
这应该做到这一点。 一定要把你的子弹放在外面。 你也可以使用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>
老问题，但：在伪元素之前工作得很好。
<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>
干杯!
对于list-style-type：inline ：
这和DSMann8的答案几乎一样，但是css代码更less。
你只需要
<style> li:before { content: ""; padding-left: 10px; } </style> <ul> <li>Some content</li> </ul>
干杯
您可以在列表项上使用padding-left属性（ 不在列表本身！）。
这是另一个使用CSS计数器和伪元素的解决scheme。 我觉得它更优雅，因为它不需要使用额外的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效果最好。
text-indent：-x px; 将把子弹靠近李，反之亦然。
在跨度上使用相对值，对于IE的较旧版本，负值左边可能无法正常工作。 PS-尽可能避免给位置。
您也可以使用背景图像替代，让您可以完全控制垂直和水平位置。
看到这个问题的答案
ul { list-style-position:inside; }
定义和用法
list-style-position属性指定列表项标记是应该出现在内容stream的内部还是外部。
资料来源： http : //www.w3schools.com/cssref/pr_list-style-position.asp
无序列表以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>
问题的关键在于，它似乎并不能让你像最后一个例子那样缩小它的方式。
为此，您可以尝试closures列表式样并使用＆bull;
<ul style="list-style-type: none;"> <li>•Some list text goes here.</li> </ul>
您可以使用ul li:before和background image，并分别将position: relative和position:absolute分配给li和li:before 。 这样，您可以创build一个图像，并将其定位在相对于li的任何位置。
在每个<li>使用<span style="display: flex;"> <li> 。
