减少列表项中项目符号和文本之间的间距答案

【问题标题】：Reducing the gap between a bullet and text in a list item减少列表项中项目符号和文本之间的间距
【发布时间】：2010-03-14 03:12:45
【问题描述】：

如何减少<li> 中项目符号和文本之间的默认间距？

项目 1
第 2 项
项目 3

我想缩小子弹和“我”之间的差距。

【问题讨论】：

另请参阅：stackoverflow.com/questions/6332873/…

标签： css html-lists

【解决方案1】：

我不确定这是否是最好的方法，但您可以指定一个否定的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 中测试。）

【讨论】：

它把 li 带到了 firefox 的 div 之外
我知道了，我正在使用 list-style-position:inside;在
负文本缩进的问题（无论如何在 Chrome 上）是多行内容不起作用——只有第一行向左移动，但后续行采用默认间距。跨度>
这不会改变项目符号和文本之间的空间。它只移动 li，包括项目符号和文本。问题是“如何减少项目符号和文本之间的空间。

【解决方案2】：

您可以通过将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;
}

结果看起来有点像这样：

使用这种方法，您不会在列表中添加不必要的 span（或其他）元素，这可以说更实用（出于以后的可扩展性和其他语义原因）。

【讨论】：

啊，是的，我也是这么想的。我确实喜欢保留不必要的标记，并允许使用普通项目符号以外的东西。赞成票。

【解决方案3】：

您可以尝试以下方法。但它要求您在<li> 元素中放置一个<span> 元素

<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 这对我来说效果很好，比子弹技术要好得多，恕我直言
这就是我需要用最少的练习来做的事情——很棒的人你是强壮的人:)

【解决方案4】：

我已经尝试过提供的这些和其他解决方案，但实际上并没有用，但我似乎找到了一种方法来做到这一点，那就是删除项目符号并使用 :before 伪元素放置一个Unicode 项目符号代替它。然后您可以调整列表项和项目符号之间的间距。您必须使用 Unicode 将实体插入到 :before 或 :after 的内容属性中 - HTML 实体不起作用。

还需要一些大小和定位代码，因为 Unicode 项目符号默认显示针头的大小。所以子弹必须被放大并绝对定位才能使其到位。请注意使用 em 来确定项目符号的大小和位置，以便在更改列表项的字体大小时，项目符号与列表项的关系保持不变。代码中的 cmets 解释了它是如何工作的。如果您想使用不同的实体，可以在此处找到 Unicode 实体列表：

http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

使用本页表格最右侧列（八进制）中的值 - 您只需要 \ 和数字。当使用其他实体时，您应该能够丢弃除 :before 规则中的 content 属性之外的所有内容，因为它们似乎以可用的大小显示。给我发电子邮件：stylinwithcss dot com 的 charles 有任何想法/cmets。我在 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”），如果您从该解决方案中删除 line-height 和 top 属性，它似乎效果更好。此外，如果您想在父 ul 元素上使用 margin-left 向内凸出您的列表项，请记住将其设置为等于 li 的“left”乘以其“font-size”的值（并且为正，当然）。
这是迄今为止我在网站上看到的最好的解决方案；它避免了在具有负边距的列表项中使用跨度的缺点和不一致，这些跨度受每个浏览器的原生间距的影响；尽管它为您提供了控制，但它避免了维护和加载图像。
正如其他人所提到的，这是迄今为止找到的解决此问题的最佳解决方案。我当前的项目需要以非常规的方式进行扩展，所有元素都会随着浏览器大小的调整而增长或缩小，保持它们的比例。库存 UL/LI 根本不符合此要求。对文本缩进的建议没有帮助，并且图像/跨度感觉有点沉重。但this 解决方案绝对完美。谢谢！

【解决方案5】：

如果在每个 li 中只有一行文本，则可以将文本缩进 li。像这样：

ul {
  list-style: disc;
}
ul li {
   text-indent: 5px;
}

或

ul {
 list-style: disc;
}
ul li {
   text-indent: -5px;
}

【讨论】：

【解决方案6】：

您可以尝试使用：

li {list-style-position: inside; }

但我不记得是否调整了空间，或者改变了空间出现的位置。

已编辑

以上似乎没有任何实质性的区别。似乎没有任何方法可以减小list-style-type 标记和文本之间的空间，尽管可以使用margin-left 或text-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 */
}

它可能允许更多的微调。

【讨论】：

@jitendra，查看编辑；虽然我不确定它们是否会产生巨大的影响。
感谢list-style-position: inside; 的建议——真的很有帮助。我在div（嵌套在另一个div）中有一个居中的ol，其中文本居中很好，但由于某种原因，编号被投射到左边很远。现在 ol 编号根据需要放置在列表文本旁边。

【解决方案7】：

这是一种方式。

    li span {
        margin-left: -11px;
    }

<ul>
    <li><span>1</span></li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

【讨论】：

在这种方法中，连续行缩进与第一行相反

【解决方案8】：

将text-indent 减小为负数以减小列表项的项目符号与其文本之间的间距。

li {
  text-indent: -4px;
}

您还可以使用margin-left 调整列表项的项目符号与其周围元素边缘之间的任何空间。

li {
  margin-left: 24px;
}

text-indent 和padding-left 都可以在项目符号和文本之间添加空格，但只有text-indent 可以将空格缩小为负数。

li { padding-left: -4px; } /* 不起作用。 */

【讨论】：

很好的解决方案，我喜欢它不涉及修改 DOM，但如果文本换行，这不会影响第一行以外的任何内容。

【解决方案9】：

我需要内联执行此操作，并结合了上述一些内容以使其适合我。我在一个 div 里面工作，想用一张图片：

UL 下的填充告诉项目符号从它所在的 div 的左边距开始的位置。我使用 em 以获得更好的可访问性/灵活性，但您也可以使用 px。如果 px 似乎没有太大移动，请使用更大的 px 值（对我来说，仅移动 1 cm 就是 60px！）。

文本缩进告诉项目符号离它旁边的文本有多近。

希望它对你有用！ :)

【讨论】：

+1 @libellus，感谢有关 text-indent 的提示。还使用 gpmcadam 的解决方案并添加文本缩进对我来说效果很好。

【解决方案10】：

我在<li>s 中有<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;
}

这会为项目符号创建伪元素。它们可以像任何其他元素一样设置样式。

我在这里实现了：http://www.cssdesk.com/R2AvX

【讨论】：

干净优雅。与其他解决方案不同，这适用于我的笔记本电脑以及我的移动 Chrome 浏览器。我稍微修改了一下：a:before { content: ""; height: .4em; width: .4em; border-radius: 50%; background: #000; display: inline-block; margin: 0 .4em 0 0; vertical-align: middle; }

【解决方案11】：

这里是如何做到这一点。

如果您这样做，多行将完美运行。 Bullet 会根据文本自动调整大小。缩进很简单：它只是li 上的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>

【讨论】：

【解决方案12】：

用小提琴来吧：

FIDDLE

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;}

【讨论】：

【解决方案13】：

ul li:before {
    content: "";
    margin-left: "your negative value";
}

【讨论】：

【解决方案14】：

为了实现我想要的外观，我制作了一个包含基本 UL 和几个 LI 的 div。我无法使用上述任何建议的想法轻松调整项目符号和文本之间的缩进（技术上可行，但并不简单。）我只是离开了 UL 和 LI，没有任何列表功能（list-style-type: none），然后添加了@987654322 @ 到每一行的开头。一开始确实给我带来了一些麻烦，它只显示了第一个项目符号，所以我在第一行的末尾添加了一个项目符号字符，刷新，然后将其删除，它们都弹出了。如果您不想要巨大的缩进，只需手动添加一个子弹 HTML 实体，如果您想要更多空间，请添加空格 HTML 实体：o 我知道这不是最好的方法，但它对我有用。

【讨论】：

【解决方案15】：

试试这个....

ul.list-group li {
     padding-left: 13px;
     position: relative;
}

ul.list-group li:before {
     left: 0 !important;
     position: absolute;
}

【讨论】：

【解决方案16】：

这是另一种方式。

为每个 li 添加两个 div，一个用于项目符号，一个用于文本。
在项目符号 div 中放置一个项目符号字符 •（或任何你喜欢的，Unicode 有很多）。将文本放在文本 div 中。
将每个 li 设置为 display:flex。

优点：

无需添加额外的项目符号图像。
没有负边距或任何东西，不会超出父级。
适用于任何支持 flexbox 的浏览器。
多行项目的正确缩进。
使用项目符号字符意味着项目符号将始终与文本正确垂直对齐，无需调整。

缺点：

需要额外的元素。

另外，如果您不想手动编码所有额外的 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>

下面是一个使用函数的例子：

fixList($('ul'));

function fixList (theList) {
  $('li', theList).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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>First list item.
  <li>Second list item.<br>It's on two lines.
  <li>Third <i>list</i> item.
</ul>

【讨论】：

这是过度设计的解决方案。可以通过 ul li 上的简单 :before 样式来完成