Question

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

第1项
第2项
第3项

我想减少子弹和“我”之间的差距。

Answer 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中测试过。）

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

结果看起来有点像这样：

alt text

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

Answer 3

您可以尝试以下方法。但它要求您在<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>

Answer 4

我已经尝试了这些和其他提供的解决方案，但实际上并没有起作用，但我似乎找到了一种方法来做到这一点，那就是删除子弹并使用：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 */
       }

Answer 5

如果在每个li中你只有一行文本，你可以在li上放置文本缩进。像这样：

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

或

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

Answer 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 */ }

它可能允许更多微调。

Answer 7

这是一种方式。

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

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

Answer 8

我需要内联这样做，并结合上面的一些内容使其适合我。我在div里面工作，想要使用图像：

UL下的填充告诉子弹从div的左边缘开始从哪里开始。我使用em来获得更好的可访问性/灵活性，但你也可以使用px。如果使用px似乎不会移动很多，请使用更大的px值（对我来说，只需移动一厘米即可达到60px！）。

text-indent告诉子弹有多接近它旁边的文本。

希望它适合你！：）

Answer 9

将text-indent缩减为负数，以减少列表项的项目符号及其文本之间的空间。

li {
  text-indent: -4px;
}

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

li {
  margin-left: 24px;
}

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

<德尔> li {padding-left：-4px; } / *不起作用。 * /

Answer 10

我<a>内有<li>。

要<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

Answer 11

这里你跟小提琴一起去：

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

Answer 12

这是怎么做的。

如果你这样做，多线工作完美。 Bullet会自动调整文字大小。缩进是直截了当的：它只是padding-left上的li。需要最少的CSS。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 13

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

Answer 14

这是另一种方式。

为每个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>

Answer 15

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

Answer 16

尝试一下。...

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

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

减少项目符号中项目符号和文本之间的差距

16 个答案:

FIDDLE