CSS 减少列表项中项目符号和文本之间的差距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2441059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reducing the gap between a bullet and text in a list item
提问by Jitendra Vyas
How can I reduce default gap between bullet and text in an <li>?
如何减少项目符号和文本之间的默认差距<li>？
- Item 1
- Item 2
- Item 3
- 第 1 项
- 第 2 项
- 第 3 项
I want to reduce gap between the bullet and "I".
我想减少子弹和“我”之间的差距。
回答by Steve Harrison
I'm not sure whether this is the best way to do it, but you could specify a negative text-indent:
我不确定这是否是最好的方法，但您可以指定一个否定的text-indent：
li {
text-indent: -4px;
}
...where your HTML code looks like:
...您的 HTML 代码如下所示：
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
(Tested in Safari 4.0.4 and Firefox 3.0.11.)
（在 Safari 4.0.4 和 Firefox 3.0.11 中测试。）
回答by gpmcadam
You could achieve this by setting the list-style-typeto none, and setting the background-imageof a list element to a generic bullet, like so:
你可以通过设置实现这一目标list-style-type来none，并设置background-image列表元素的一个通用子弹，就像这样：
ul {
list-style-type: none;
}
li {
background-image: url(bullet.jpg);
background-repeat: no-repeat;
background-position: 0px 50%;
padding-left: 7px;
}
The outcome would look a little something like this:
结果看起来有点像这样：
With this approach, you aren't adding unnecessary span(or other) elements to your lists, which is arguably more practical (for later extendibility and other semantic reasons).
使用这种方法，您不会向span列表中添加不必要的（或其他）元素，这可以说更实用（出于以后的可扩展性和其他语义原因）。
回答by Jaime Garcia
You could try the following. But it requires you to put a <span>element inside the <li>elements
您可以尝试以下方法。但是它需要你在<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>
回答by Charles Wyke-Smith
I've tried these and other solutions offered, which don't actually work, but I seem to have found a way to do this, and that is to remove the bullet and use the :before pseudo-element to put a Unicode bullet in its place. Then you can adjust the the space between the list item and bullet. You have to use Unicode to insert an entity into the content property of :before or :after - HTML entities don't work.
我已经尝试了这些和其他提供的解决方案，但实际上并没有奏效，但我似乎找到了一种方法来做到这一点，那就是删除项目符号并使用 :before 伪元素将 Unicode 项目符号放入它的位置。然后您可以调整列表项和项目符号之间的间距。您必须使用 Unicode 将实体插入到 :before 或 :after 的内容属性中 - HTML 实体不起作用。
There's some sizing and positioning code needed too, because the Unicode bullet by default displays the size of a pinhead. So the bullet has to be enlarged and absolutely positioned to get it into place. Note the use of ems for the bullet's sizing and positioning so that the bullet's relationship to the list item stays constant when your change the font size of the list item. The comments in the code explain how it all works. If you want to use a different entity, you can find a list of the Unicode entities here:
还需要一些大小和定位代码，因为 Unicode 项目符号默认显示针头的大小。因此，子弹必须放大并绝对定位才能将其固定到位。请注意使用 em 来调整项目符号的大小和位置，以便在更改列表项的字体大小时项目符号与列表项的关系保持不变。代码中的注释解释了它是如何工作的。如果要使用其他实体，可以在此处找到 Unicode 实体列表：
http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
Use a value from the far right column (octal) from the table on this page - you just need the \ and number. You should be able to trash everying except the content property from the :before rule when using the other entities as they seem to display at a useable size. Email me: charles at stylinwithcss dot com with any thoughts/comments. I tested it Firefox, Chrome and Safari and it works nicely.
使用本页表格中最右侧的列（八进制）中的值 - 您只需要 \ 和数字。在使用其他实体时，除了 :before 规则中的 content 属性之外，您应该能够删除所有内容，因为它们似乎以可用大小显示。给我发电子邮件： stylinwithcss dot com 的 charles 有任何想法/意见。我对 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:"19"; /* 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 */
}
回答by Bogdana Zadic
If in every li you have only one row of text you can put text indent on li. Like this :
如果在每个 li 中只有一行文本，则可以在 li 上缩进文本。像这样 ：
ul {
list-style: disc;
}
ul li {
text-indent: 5px;
}
or
或者
ul {
list-style: disc;
}
ul li {
text-indent: -5px;
}
回答by David says reinstate Monica
You might try using:
您可以尝试使用：
li {list-style-position: inside; }
But I can't remember if that adjusts the space, or changes where the space occurs.
但我不记得这是否调整了空间，或者改变了空间出现的位置。
Edited已编辑
The above doesn't seem to make any substantial difference. There doesn't seem to be any way to decreasethe space between the list-style-typemarker and the text, though it can be increasedusing margin-leftor text-indent.
以上似乎没有任何实质性的区别。似乎没有任何方法可以减少list-style-type标记和文本之间的空间，尽管可以使用或增加它。margin-lefttext-indent
Sorry I can't be of more use.
对不起，我不能再有用了。
Edited已编辑
Just out of curiosity, how about 'faking' the bullet with a background image?
只是出于好奇，用背景图像“伪造”子弹怎么样？
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 */
}
It might allow for more fine-tuning.
它可能允许进行更多微调。
回答by mark123
This is one way.
这是一种方式。
li span {
margin-left: -11px;
}
<ul>
<li><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
回答by Hitesh
I have <a>inside the <li>s.
我<a>在<li>s里面。
To the <ul>elements, apply the following CSS:
对于<ul>元素，应用以下 CSS：
ul {
margin: 0;
padding: 0;
list-style: none;
}
To the <a>elements, apply the following CSS:
对于<a>元素，应用以下 CSS：
a:before {
content: "";
height: 6px;
width: 6px;
border-radius: 50%;
background: #000;
display: inline-block;
margin: 0 6px 0 0;
vertical-align: middle;
}
This creates pseudo elements for the bullets. They can be styled just like any other elements.
这会为项目符号创建伪元素。它们可以像任何其他元素一样进行样式设置。
I've implemented it here: http://www.cssdesk.com/R2AvX
我在这里实现了它：http: //www.cssdesk.com/R2AvX
回答by 2540625
Reduce text-indentto a negative number to decrease the space between the list item's bullet and its text.
减少text-indent到负数以减少列表项的项目符号与其文本之间的空间。
li {
text-indent: -4px;
}
You can also use margin-leftto adjust any space between the list-item's bullet and the edge of its surrounding element.
您还可以使用margin-left调整列表项的项目符号与其周围元素边缘之间的任何空间。
li {
margin-left: 24px;
}
Both text-indentand padding-leftcan addspace between the bullet and text, but only text-indentcan reduce space to negative.
双方text-indent并padding-left可以添加项目符号和文本之间的空间，但只text-indent可以减少空间为负面。
回答by libellus
I needed to do this inline, and combined a few of the above to make it work right for me. I'm working inside a div and wanted to use an image:
我需要内联执行此操作，并结合了上述一些内容以使其适合我。我在 div 中工作并想使用图像：
The padding under the UL told the bullet where to start from the left margin of the div it's in. I use em for better accessibility/flexibility, but you could use px too. If it doesn't seem to move much with px, use a much larger px value (for me, just moving it in a cm was 60px!).
UL 下的填充告诉子弹从它所在的 div 的左边距从哪里开始。我使用 em 以获得更好的可访问性/灵活性，但您也可以使用 px。如果 px 的移动似乎不大，请使用更大的 px 值（对我而言，仅将其移动一厘米就是 60px！）。
The text-indent tells the bullet how close to get to the text it's next to.
文本缩进告诉项目符号与它旁边的文本有多接近。
Hope it works for you! :)
希望这对你有用！:)
