我想控制子弹在<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/
似乎您可以(在某种程度上)使用<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>
把它的内容放在一个相对定位的span中，然后你可以通过span的left属性来控制空间。
李跨度{ 位置:相对; 左:-10 px; } < ul > <李> < span >第1项< / span > < /李> <李> < span >第二项< / span > < /李> <李> < span >项3 < / span > < /李> < / ul >
这个应该可以了。一定要把子弹对准外面。你也可以使用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>
总结一下这里的其他答案-如果你想在<li>列表项中更好地控制项目符号和文本之间的空格，你的选项是:
(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或%
缺点:
向页面添加一个额外的(尽管很小)图像文件，增加页面的重量 如果用户增加了浏览器上的文本大小，项目符号将保持原来的大小。随着文本大小的增加，它也可能会进一步偏离位置 如果你正在开发一个“响应式”布局，只使用百分比作为宽度，那么在一定的屏幕宽度范围内将子弹头精确地放置在你想要的位置可能会很困难
2. 在<li>标签上使用填充
<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>
<ul>
<li>Some text</li>
</ul>
优点:
No image =少下载1个文件 通过调整<li>上的填充，您可以在项目符号和文本之间添加任意多的额外水平空间 如果用户增加了文本大小，间距和项目符号大小应该按比例缩放
缺点:
不能移动子弹更接近文本比浏览器默认 仅限于CSS内置项目符号类型的形状和大小 子弹的颜色必须与文本相同 无法控制子弹的垂直位置
(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>
优点:
No image = 1 less file to download You get more control over the position of the bullet than with option (2) – you can move it closer to the text (although despite my best efforts it seems you can't alter the vertical position by adding padding-top to the <span>. Someone else may have a workaround for this, though...) The bullet can be a different colour to the text If the user increases their text size, the bullet should scale in proportion (providing you set the padding & margin in ems not px)
缺点:
需要额外的非语义元素(这可能会让你在SO上失去更多的朋友，而不是在现实生活中;)但对于那些希望他们的代码尽可能精简和高效的人来说，这是令人讨厌的，并且它违反了HTML / CSS应该提供的表示和内容的分离) 无法控制子弹的大小和形状
这里希望CSS4中有一些新的列表风格的功能，这样我们就可以创建更智能的项目符号，而不需要借助图像或额外的标记。
您可以使用ul li:before和背景图像，并分别将position: relative和position:absolute分配给li和li:before。通过这种方式，您可以创建一个图像，并将其定位到任何您想要相对于li的位置。
ul
{
list-style-position:inside;
}
定义和用法
list-style-position属性指定列表项标记应该出现在内容流内部还是外部。
来源:http://www.w3schools.com/cssref/pr_list-style-position.asp
老问题了，但是: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>
干杯!
对于list-style-type: inline:
它几乎和DSMann8的答案一样，但css代码更少。
你只需要
<style>
li:before {
content: "";
padding-left: 10px;
}
</style>
<ul>
<li>Some content</li>
</ul>
干杯
在li上使用文本缩进效果最好。
文本缩进:-x px;会让子弹更靠近李，反之亦然。
在IE的旧版本中，在负左边使用相对span可能无法正常工作。 附注:尽量避免给出职位。
无序列表以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>
下面是另一个使用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
}
我使用不可分割的空格，以便空格只影响列表元素的第一行(如果列表元素超过一行长)。你可以在这里使用填充。
老问题了，但仍然相关。 我建议使用负文本缩进。 List-style-position必须在外部。
优点:
子弹自动定位正确 改变字体大小不会破坏项目符号的位置 没有额外的元素(也没有::伪元素) 适用于RTL和LTR而不改变CSS。
缺点:
试一试 来 找到 一:)
如果你只想减少项目符号和文本之间的间距，似乎有一个更干净的解决方案:
li:before {
content: "";
margin-left: -0.5rem;
}
使用padding-left: 1 em;文本缩进:<li>标签的-1em。 然后，list-style-position:用于<ul>标记。
<ul style='list-style-position: inside;'>
<li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>
当您希望将文本移动到更靠近项目符号的位置时，即使您有多行文本，以下解决方案也很有效。
右边距使您可以将文本移动到更靠近项目符号的位置
文本缩进确保多行文本仍然正确对齐
李:{之前 内容:“”; margin-right: 5 px;/*调整使文本更靠近项目符号*/ ｝ 李{ indent: 5 px;/*对齐文本的第二行*/ ｝ < ul > <li> Item 1…李< / > <li> Item 2…这个项目有大量的文本，导致第二行!请注意，第二行是如何与第一行对齐的!李< / > <li> Item 3…李< / > < / ul >
如果你的列表样式是在里面，那么你可以删除子弹并创建你自己的…例:(在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;
}
}
更多信息w3schools ul { list-style:没有; ｝
Ul li::before { 内容:“2022 \”; 颜色:黑色; 显示:inline-block; 宽度:8 px;}
如果您不希望添加额外的标记，例如<span>，您可以使用:
list-style-position:内部;将列表样式从左侧移动到更接近文本的位置 如果你仍然需要拉近列表项，你可以使用li元素上的::before选择器将文本移向项目符号。
ul {
list-style-type: disc;
list-style-position: inside;
padding-left: 16px; /* or margin */
}
li::before {
content: '';
margin-left: -8px;
}
列表项文本 列表项文本 列表项文本 列表项文本
有趣的是，当我们面对这样的问题时，我们大多数人都会使用边距、填充和/或位置属性。我知道我以前是这样的。如果我们都看错了呢?
在提供不同的解决方案之前，让我们试着更好地理解浏览器实现。如果我们看一下WebKit中列表的用户代理样式表，我们会发现:
ul, menu, dir {
//...
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
ol {
//...
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
li {
display: list-item;
text-align: match-parent;
}
其他浏览器也类似。列表缩进由ul和ol的填充提供，而不是li。同样值得注意的是，在任何地方都找不到负定位、空白或缩进。那么是什么造成了子弹和文字之间的差距呢?
只有当我们尝试改变项目符号本身时，答案才会变得清晰。我将使用list-style-type属性来做到这一点，但不是给它一个像disc这样的标准值(它的定义由浏览器决定，在规范中有点模糊)，我将给它一个带引号的字符串值:
申{ list-style-type:●; 的 <德> < li >哦亲爱的< / li > < li > < / li >发生了什么事 <li>到子弹发射器?< / li > < /德>
我们可以通过在项目符号后面添加一个标准空格字符来重新引入空格。”
ul。custom-bulleted { List-style-type:“•”; ｝ < ul类= " custom-bulleted " > <li>啊，好多了 <li>我从来不喜欢粘性子弹 < / ul > < ul > <li>我是一个无风格的列表 我从来没有那个问题!李< / > < / ul >
我只能假设这类似于浏览器内部所做的事情——在项目符号之后插入空格，并基本上将整个内容浮动到每一里的最左边。实际上，规范通过将默认的内部实现与@counter-style at-rule进行比较来证实这一点，@counter-style at-rule允许我们定义自己的列表类型:
下面的样式表片段提供了的规范定义 这些预定义的计数器样式: @反风格光盘{ 系统:循环; 符号:\ 2022; /*•*/ 后缀:" "; ｝
空格就在后缀中。
There's one unanswered question though… Why does the unstyled list look different to the custom-bulleted class in my example? Again, it seems to come down to each browser's different internal implementation. If you compare them in different browsers, even the custom bullets vary between browsers. What I have found though, is that you can standardise the appearance of a string list-style-type simply by declaring a font-family on li::marker, a feature that wasn't available to us when this question was originally asked.
所以，回到最初的问题，如果我们想控制项目符号和li之间的空格，我们可以通过改变空白字符的宽度，或者通过使用基于字符串的list-style-type添加多个空白字符来实现，这得到了广泛的浏览器支持。或者，我们可以使用@counter-style定义一个自定义列表样式，但Safari目前不支持这种样式。
Unicode为我们提供了大量的空白字符供我们选择。以下是使用Em Space (U+2003)的列表:
ul { list-style-type:“002003•\”; ｝ < ul > 我喜欢大差距，我不能说谎 你们这些兄弟不能否认 < / ul >
I know this approach is not the first one that springs to mind. We've been so used to aligning things with margins, padding and indents that we tend to reach for those tools every time. But in many ways, the browser's way makes sense. What could be simpler than indenting the whole list with a single padding declaration on the ul, and letting the bullet take care of itself? (Maybe one day, the li::marker pseudo-element will support padding, for those who reckon they need even more fine-grained control. I won't be holding my breath though.)
没有人提到::marker属性
它允许将空间设置为小于浏览器默认值。
Ul li::marker { 内容:“•”;/*作为副作用，将空格设置为零*/ 字体:1.2em/1 sans-serif;/*调整子弹大小*/ ｝ Ul li { padding-left: .2em;/*完全控制空格*/ ｝ < ul > <李>一 <李>两个 <李>三 < / ul >
我99.9999%确定没人在乎这个问题，因为这个问题12年前就有人问过了，但我现在需要解决这个问题，以下是我的发现:
后面的空格被视为转义的一部分，因此如果您确实想在转义字符后面加上一个空格，请使用2个空格。
而且，它确实有效!
ul.asterisks {
list-style-type: '\2731\ ';
}
来源:在标记和CSS中使用字符转义
附注:也许这是因为我做这个工作太久了，我已经失去理智了?在浏览器的dev视图中插入空格。为了获得空间，我必须逃离空间??(见上图)。疯狂。(顺便问一下，为什么这些页面都是2010年的?2010年发生了什么?等一下……12年前的2010年。:恐惧:)
来源:CSS字符转义序列
