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 {&nbsp; position: relative;&nbsp; left: -10px;}<ul>&nbsp; <li><span>item 1</span></li>&nbsp; <li><span>item 2</span></li>&nbsp; <li><span>item 3</span></li></ul>

Answer 2

在这里总结其他答案–如果您希望更好地控制<li>项目符号和列表项中文本之间的间距，则可以选择：（1）使用背景图片：<style type="text/css">li {&nbsp; &nbsp; list-style-type:none;&nbsp; &nbsp; background-image:url(bullet.png);}</style><ul>&nbsp; &nbsp; <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>&nbsp; &nbsp; <li>Some text</li></ul>好处：无图像=少下载1个文件通过调整上的填充<li>，您可以根据需要在项目符号和文本之间添加尽可能多的水平空间如果用户增加了文本大小，则间距和项目符号大小应按比例缩放缺点：无法将项目符号比浏览器默认值更靠近文本限于CSS内置项目符号类型的形状和大小项目符号必须与文本颜色相同无法控制子弹的垂直位置（3）将文字换成多余的<span>元素<style type="text/css">li {&nbsp; &nbsp; padding-left:1em;&nbsp; &nbsp; color:#f00; /* red bullet */}li span {&nbsp; &nbsp; display:block;&nbsp; &nbsp; margin-left:-0.5em;&nbsp; &nbsp; color:#000; /* black text */}</style><ul>&nbsp; &nbsp; <li><span>Some text</span></li></ul>好处：无图像=少下载1个文件你得到了子弹比选项的位置更多的控制（2） -你可以靠拢它的文字（尽管尽管我尽了最大努力，似乎你无法通过添加改变垂直位置padding-top的<span>其他人可能有。一个解决方法，不过...）项目符号可以是与文本不同的颜色如果用户增加其文本大小，则项目符号应按比例缩放（前提是您以ems而非px设置填充和边距）缺点：需要额外的非语义元素（这可能会使您在SO上失去比在现实生活中更多的朋友；），但对于那些喜欢其代码尽可能精简和高效的人来说很烦人，并且违反了表示和内容的分离HTML / CSS应该提供的内容）无法控制子弹的大小和形状这是希望CSS4中有一些新的列表样式功能，因此我们可以创建更智能的项目符号，而无需使用图像或exta标记：）