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/

原文由 erjiang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将其内容放在一个相对定位的 span 中，然后可以通过—的 span left 属性控制空间。

 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>

原文由 BalusC 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 标记 :)

原文由 Joel 发布，翻译遵循 CC BY-SA 3.0 许可协议