如何减less<li>中项目符号和文本之间的默认差距？
如何减less<li>项目符号和文本之间的默认差距？
- 第1项
- 第2项
- 第3项
我想减less子弹和我之间的差距
您可以通过将list-style-type设置为none ，并将list元素的background-image设置为一个通用的项目符号来实现，如下所示：
ul { list-style-type: none; } li { background-image: url(bullet.jpg); background-repeat: no-repeat; background-position: 0px 50%; padding-left: 7px; }
结果会看起来像这样：
使用这种方法，您不会为您的列表添加不必要的span （或其他）元素，这对于后来的扩展性和其他语义方面的原因来说是可行的。
我不确定这是否是最好的方法，但是您可以指定一个负面的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中testing）
你可以尝试以下。 但是它要求你在<li>元素中放置一个<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>
我尝试了这些和其他解决scheme提供，这实际上并没有工作，但我似乎已经find了一种方法来做到这一点，这是删除子弹和使用：伪伪元素之前把一个Unicode的子弹它的地方。 然后您可以调整列表项目和项目符号之间的空间。 您必须使用Unicode将实体插入到以下内容属性中：before或：after – HTML实体不起作用。
还需要一些大小和定位代码，因为默认情况下，Unicode项目符号显示针头大小。 所以子弹必须放大并且完全放置到位。 请注意使用ems作为项目符号的大小和位置，以便在更改列表项的字体大小时，项目符号与列表项的关系保持不变。 代码中的注释说明了它是如何工作的。 如果你想使用不同的实体，你可以在这里find一个Unicode实体列表：
http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
使用此页上表格最右侧（八进制）的值 – 您只需要\和数字。 当使用其他实体时，您应该能够清除before：before规则中的内容属性，因为它们似乎以可用的大小显示。 给我发电子邮件：查尔斯在stylinwithcss点com与任何想法/评论。 我testing了它，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 */ }
如果在每一个你只有一行文本，你可以把文字缩进李。 喜欢这个 ：
ul { list-style: disc; } ul li { text-indent: 5px; }
要么
ul { list-style: disc; } ul li { text-indent: -5px; }
这是一种方法。
li span { margin-left: -11px; } <ul> <li><span>1</span></li> <li>2</li> <li>3</li> <li>4</li> </ul>
你可以尝试使用：
li {list-style-position: inside; }
但我不记得这是否调整空间 ，或改变空间发生的地方 。
编辑
上述似乎没有任何实质性的差异。 似乎没有办法减less list-style-type标记和文本之间的空间，尽pipe可以使用margin-left或text-indent来增加它们之间的 margin-left 。
对不起，我不能再用了。
编辑
出于好奇，如何用背景图像“伪造”子弹呢？
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 */ }
它可能允许更多的微调。
我需要这样做内联，并结合上述几个使它适合我。 我在一个div里面工作，想要使用一个图像：
UL下面的填充告诉子弹从它的左边缘开始。我使用em来获得更好的可访问性/灵活性，但是也可以使用px。 如果它看起来不像px那么大，那么使用一个更大的px值（对于我来说，只是把它移动一个厘米就是60px！）。
文本缩进告诉子弹有多接近到它旁边的文本。
希望对你有帮助！ 🙂
将text-indent减less为负数以减less列表项目的子弹与其文本之间的空间。
li { text-indent: -4px; }
您也可以使用margin-left来调整list-item的项目符号和其周围元素边缘之间的任何空间。
li { margin-left: 24px; }
text-indent和padding-left都可以在项目符号和文本之间添加空格，但只有text-indent可以将空间减less为负值。
li {padding-left：-4px; } / *不起作用。 * /
我在<li>有<a> 。
对<ul>元素应用下面的CSS：
ul { margin: 0; padding: 0; list-style: none; }
对于<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; }
这为子弹创build伪元素。 它们可以像任何其他元素一样被devise。
我已经在这里实现它： http : //www.cssdesk.com/R2AvX
这里你去与小提琴：
小提琴
HTML：
<ol> <li>List 1 <ol> <li>Sub-Chapter</li> <li>Sub-Chapter</li> </ol> </li> <li>List 2 <ol> <li>Sub-Chapter</li> <li>Sub-Chapter</li> </ol> </li> <li>List 3</li> </ol>
CSS：
ol {counter-reset:item;} ol li {display:block;} li:before {content:counters(item, ".");counter-increment:item;left:-7px;position:relative;font-weight:bold;}
以下是如何做到这一点。
如果你这样做的话，多线可以很好地工作。 子弹将自动与文本大小。 缩进是直接的：只是里面的padding-left 。 最小的CSS需要。
ul { margin: 0; padding: 0; list-style-type: none; } ul > li { position: relative; padding-left: 12px; } ul > li:before { content: "•"; position: absolute; left: 0; } div { border: 1px solid #ccc; }
<div> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, explicabo iste numquam dolorem harum natus! Voluptate magni expedita, eaque voluptates, aliquam maiores vel quia repellat a ipsum possimus eveniet, blanditiis.</li> <li>Repudiandae repellendus laboriosam, odio vero debitis non quisquam provident deserunt, ratione facilis suscipit delectus sunt aliquid, in maxime autem optio, exercitationem iusto fugiat itaque omnis assumenda est a praesentium? Natus?</li> <li>Voluptatem, distinctio, eius, soluta, atque laboriosam tempora magnam sequi saepe architecto accusamus hic facilis! Tenetur, necessitatibus. Ut ipsam, officia omnis obcaecati vero consectetur vel similique nam consequatur quidem at doloremque.</li> </ul> </div>
为了达到我想要的样子，我制作了一个包含基本UL和几个LI的div。 我不能用上面提出的任何build议（技术上可能，但并不简单）来简单地调整项目符号和文本之间的缩进。我刚刚离开UL和LI，没有任何列表function（ list-style-type: none ）增加一个• 到每一行的开头。 它起初给了我一些麻烦，它只显示了第一个子弹，所以我在第一行的末尾添加了一个子弹字符，刷新了，然后删除了它们，然后它们都popup来了。 只要手动添加项目符号HTML实体，如果你不想要一个巨大的缩进，添加空间的HTML实体，如果你想要更多的空间：我知道这不是最好的方法，但它为我工作。
这是另一种方式。
- 为每个li添加两个div，一个用于子弹，一个用于文本。
- 在bullet div中放置子弹字符（或任何你喜欢的，Unicode有很多）。 把文本放在文本div中。
- 设置每个li
display:flex。
优点：
- 没有额外的子弹图像添加。
- 没有负边距或任何东西，不会超出父母。
- 适用于任何支持flexbox的浏览器。
- 适当缩进多行项目。
- 子弹字符的使用意味着子弹将始终与文本正确地垂直alignment，不需要调整。
缺点：
- 需要额外的元素。
另外，如果你不想手动编写所有额外的div，你可以做一个普通的列表，然后运行这个函数来转换它，传递你的ul作为参数：
function fixList (theList) { theList.find('li').each(function (_, li) { li = $(li); $('<div/>').html(li.html()).appendTo(li.empty()); $('<div/>').text('•').prependTo(li); }); }
例：
li { font-family: sans-serif; list-style-type: none; display: flex; } li > div:first-child { margin-right: 0.75ex; /* set to desired spacing */ }
<ul> <li><div>•</div><div>First list item.</div> <li><div>•</div><div>Second list item.<br>It's on two lines.</div> <li><div>•</div><div>Third <i>list</i> item.</div> </ul>
