CSS：控制项目符号和<li>之间的空间

Question

我想控制子弹<li>在<ol>或中向右推动多少水平空间<ul>。也就是说，不是总有*  Some list text goes   here.我希望能够将其更改为*         Some list text goes          here.要么*Some list text goes here.我环顾四周，但只能找到将整个块向左或向右移动的说明，例如，http：//www.alistapart.com/articles/taminglists/

Answer 1

将其内容放在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>

Answer 2

在这里总结其他答案–如果您希望更好地控制<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>

好处：

无图像=少下载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>

好处：

无图像=少下载1个文件

你得到了子弹比选项的位置更多的控制（2） -你可以靠拢它的文字（尽管尽管我尽了最大努力，似乎你无法通过添加改变垂直位置padding-top的<span>其他人可能有。一个解决方法，不过...）

项目符号可以是与文本不同的颜色

如果用户增加其文本大小，则项目符号应按比例缩放（前提是您以ems而非px设置填充和边距）

缺点：

需要额外的非语义元素（这可能会使您在SO上失去比在现实生活中更多的朋友；），但对于那些喜欢其代码尽可能精简和高效的人来说很烦人，并且违反了表示和内容的分离HTML / CSS应该提供的内容）

无法控制子弹的大小和形状

这是希望CSS4中有一些新的列表样式功能，因此我们可以创建更智能的项目符号，而无需使用图像或exta标记：）