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

慕桂英4014372

在这里总结其他答案–如果您希望更好地控制

项目符号和列表项中文本之间的间距，则可以选择：(1)使用背景图片：

•    
• Some text

好处：您可以将任何图像用作项目符号您可以使用CSS background-position使用像素，ems或％将图像定位在相对于文本的几乎任何位置缺点：向页面添加一个额外的(尽管很小)图像文件，从而增加页面的权重如果用户在其浏览器上增加了文本大小，则项目符号将保持原始大小。随着文字大小的增加，它也可能会偏离原位如果要仅使用百分比的宽度来开发“响应式”布局，则可能难以在整个屏幕宽度范围内将子弹准确地放置在所需位置2.在标签上使用填充

•    
• Some text

好处：无图像=少下载1个文件通过调整上的填充，您可以根据需要在项目符号和文本之间添加尽可能多的水平空间如果用户增加了文本大小，则间距和项目符号大小应按比例缩放缺点：无法将项目符号比浏览器默认值更靠近文本限于CSS内置项目符号类型的形状和大小项目符号必须与文本颜色相同无法控制子弹的垂直位置(3)将文字换成多余的 元素

•    
• Some text

好处：无图像=少下载1个文件你得到了子弹比选项的位置更多的控制(2) -你可以靠拢它的文字(尽管尽管我尽了最大努力，似乎你无法通过添加改变垂直位置padding-top的 其他人可能有。一个解决方法，不过...)项目符号可以是与文本不同的颜色如果用户增加其文本大小，则项目符号应按比例缩放(前提是您以ems而非px设置填充和边距)缺点：需要额外的非语义元素(这可能会使您在SO上失去比在现实生活中更多的朋友；)，但对于那些喜欢其代码尽可能精简和高效的人来说很烦人，并且违反了表示和内容的分离HTML / CSS应该提供的内容)无法控制子弹的大小和形状这是希望CSS4中有一些新的列表样式功能，因此我们可以创建更智能的项目符号，而无需使用图像或exta标记：)