我想控制子弹在<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/
当前回答
把它的内容放在一个相对定位的span中，然后你可以通过span的left属性来控制空间。
李跨度{ 位置:相对; 左:-10 px; } < ul > <李> < span >第1项< / span > < /李> <李> < span >第二项< / span > < /李> <李> < span >项3 < / span > < /李> < / 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>
总结一下这里的其他答案-如果你想在<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中有一些新的列表风格的功能，这样我们就可以创建更智能的项目符号，而不需要借助图像或额外的标记。
你可以给<li>元素一个padding-left。
可以在列表项上使用padding-left属性(而不是在列表本身上!)。
下面是另一个使用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
}
我使用不可分割的空格，以便空格只影响列表元素的第一行(如果列表元素超过一行长)。你可以在这里使用填充。
