Ste*_*son 31
我不确定这是否是最佳方法,但您可以指定否定text-indent:
li {
text-indent: -4px;
}
...您的HTML代码如下所示:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
(在Safari 4.0.4和Firefox 3.0.11中测试过.)
- 负文本缩进的问题(无论如何在Chrome上)是多行内容不起作用 - 只有第一行向左移动,但后续行是默认间距. (11认同)
- 这不会改变项目符号和文本之间的空间。它只移动 li，包括项目符号和文本。问题是“如何减少项目符号和文本之间的空间。 (2认同)
gpm*_*dam 30
您可以通过设置list-style-typeto none,并将background-imagelist元素设置为通用项目符号来实现此目的,如下所示:
ul {
list-style-type: none;
}
li {
background-image: url(bullet.jpg);
background-repeat: no-repeat;
background-position: 0px 50%;
padding-left: 7px;
}
结果看起来像这样:
使用这种方法,您不会span在列表中添加不必要的(或其他)元素,这可以说更实用(以后可扩展性和其他语义原因).
Jai*_*cia 21
您可以尝试以下方法.但它需要你<span>在<li>元素中放置一个元素
<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;
}
</style>
</head>
<body>
<ul class="a">
<li><span>Coffee</span></li>
<li><span>Tea</span></li>
<li><span>Coca Cola</span></li>
</ul>
</body>
</html>
- +1,但我建议使用-.5em而不是像素 (5认同)
Cha*_*ith 20
我已经尝试了这些和其他提供的解决方案,但实际上并没有起作用,但我似乎找到了一种方法来做到这一点,那就是删除子弹并使用:before伪元素将Unicode子弹放入它的位置.然后,您可以调整列表项和项目符号之间的空间.您必须使用Unicode将实体插入以下内容属性:before或:after - HTML实体不起作用.
还需要一些大小调整和定位代码,因为Unicode项目符号默认显示针头的大小.因此子弹必须放大并且绝对定位才能将其固定到位.注意使用ems进行子弹的大小调整和定位,以便在更改列表项的字体大小时,子弹与列表项的关系保持不变.代码中的注释解释了它是如何工作的.如果要使用其他实体,可以在此处找到Unicode实体的列表:
http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
使用本页表格中最右列(八进制)的值 - 您只需要\和数字.您应该能够在使用其他实体时从之前的规则中删除除了content属性之外的所有内容,因为它们似乎以可用的大小显示.给我发电子邮件:来自stylinwithcss dot com的查尔斯有任何想法/评论.我测试了Firefox,Chrome和Safari,它运行良好.
body {
font-family:"Trebuchet MS", sans-serif;
}
li {
font-size:14px; /* set font size of list item and bullet here */
list-style-type:none; /* removes default bullet */
position:relative; /* positioning context for bullet */
}
li:before {
content:"\2219"; /* escaped unicode character */
font-size:2.5em; /* the default unicode bullet size is very small */
line-height:0; /* kills huge line height on resized bullet */
position:absolute; /* position bullet relative to list item */
top:.23em; /* vertical align bullet position relative to list item */
left:-.5em; /* position the bullet L- R relative to list item */
}
- 很不错！给阅读本文的其他人的一个提示：如果您想使用光盘（内容：“\2022”），如果您从此解决方案中删除行高和顶部属性，它似乎工作得更好。另外，如果您想在父 ul 元素上使用 margin-left 来向内凸出列表项，请记住将其设置为等于 li 的“left”乘以其“font-size”的值（并且是正数，当然）。 (2认同)
小智 7
如果在每个li中你只有一行文本,你可以在li上放置文本缩进.像这样 :
ul {
list-style: disc;
}
ul li {
text-indent: 5px;
}
要么
ul {
list-style: disc;
}
ul li {
text-indent: -5px;
}
您可以尝试使用：
li {list-style-position: inside; }
但我不记得这是否调整了空间，或者改变了空间出现的位置。
已编辑
以上似乎没有任何实质性的区别。似乎没有任何方法可以减少list-style-type标记和文本之间的空间，尽管可以使用或增加它。margin-lefttext-indent
对不起，我不能再有用了。
已编辑
只是出于好奇，用背景图像“伪造”子弹怎么样？
ul {list-style-type: none;
margin: 0;
padding: 0;
}
ul li {background: #fff url(path/to/bullet-image.png) 0 50% no-repeat;
margin: 0;
padding: 0 0 0 10px; /* change 10px to whatever you feel best suits you */
}
它可能允许进行更多微调。