Question

我想控制子弹在<li>或<ol>向右推动其<ul>的水平空间。

也就是说，而不是总是

*  Some list text goes
   here.

我希望能够将其改为

*         Some list text goes
          here.

或

*Some list text goes
 here.

我环顾四周，但只能找到左右移动整个区块的说明，例如http://www.alistapart.com/articles/taminglists/

Answer 1

将其内容放在相对定位的span中，然后您可以按left的{{1}}属性控制空格。

span

Answer 2

总结其他答案 - 如果您希望更好地控制项目符号与<li>列表项中的文本之间的空间，您的选项是：

（1）使用背景图片：

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

优点：

您可以使用所需的任何图像
您可以使用CSS background-position将图像放置在与文本相关的任何位置，使用像素，ems或％

缺点：

在页面上添加一个额外的（虽然很小）图像文件，增加页面重量
如果用户在浏览器上增加文字大小，子弹将保持原始大小。随着文字大小的增加，它也可能会越来越不合适
如果您只使用宽度百分比来开发“响应式”布局，则可能很难将子弹准确地放在屏幕宽度范围内的所需位置

<强> 2。在<li>代码

上使用填充

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

优点：

无图像=少下载1个文件
通过调整<li>上的填充，您可以根据需要在项目符号和文本之间添加额外的水平空间
如果用户增加文字大小，则间距和项目符号大小应按比例缩放

缺点：

无法将子弹移动到比浏览器默认值
仅限于CSS内置项目符号类型的形状和大小
Bullet必须与文本颜色相同
无法控制子弹的垂直位置

（3）将文字换入额外的<span>元素

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

优点：

无图像=少下载1个文件
您可以更好地控制子弹的位置，而不是使用选项（2） - 您可以将其移近文本（尽管尽管我付出了最大的努力，但似乎您无法通过添加{{1}来改变它的垂直位置} padding-top。其他人可能有一个解决方法，但是......）
子弹可以是与文本不同的颜色
如果用户增加文字大小，子弹应按比例缩放（假设你设置了ems中的填充和边距而不是px）

缺点：

需要一个额外的非语义元素（这可能会让你失去更多的朋友，而不是现实生活中的朋友;）但是对于那些喜欢他们的代码尽可能精简和高效的人而言，这很烦人，并且它违反了HTML / CSS应该提供的演示文稿和内容）
无法控制子弹的大小和形状

这里希望CSS4中有一些新的列表样式功能，因此我们可以创建更智能的项目符号，而无需借助图像或exta标记：）

Answer 3

这应该这样做。务必将子弹设置到外面。你也可以使用CSS伪元素，如果你可以在IE7中向下删除它们。我并不真的建议在这种情况下使用伪元素，但它确实可以控制距离。

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

Answer 4

老问题，但是：之前的伪元素在这里工作得很好。

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

它运作良好，并且不需要许多额外的规则或HTML。

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

干杯！

Answer 5

对于 list-style-type：inline ：

它与DSMann8的答案差不多，但css代码较少。

你只需要

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

干杯

Answer 6

您可以在列表项目上使用padding-left属性（列表本身不！）。

Answer 7

在li上使用text-indent效果最佳。

text-indent：-x px;将子弹移近李，反之亦然。

使用相对于跨度，负面左侧可能无法与旧版本的IE一起正常工作。 P.S-尽量避免给出位置。

Answer 8

无序列表以ul标记开头。每个列表项都以。开头默认情况下，列表项将标有项目符号（小黑圈）：

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

输出：

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

text-indent属性指定文本块中第一行的缩进注意：允许使用负值。如果值为负，则第一行将缩进到左侧。

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 9

这是使用css计数器和伪元素的另一种解决方案。我发现它更优雅，因为它不需要使用额外的html标记或css类：

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

我使用不可破坏的空格，以便间距仅影响列表元素的第一行（如果列表元素长度超过一行）。你可以在这里使用填充。

Answer 10

旧问题但仍然相关。我建议使用否定 list-style-position 。 outside 必须为$(document).click(function (e) { var container = $("#service-icon-button"); if (e.target.id == container[0].id) // if the target of the click isn't the TOGGLE BUTTON... { if ($("#service-icon-button").css("margin-left") == "480px") { $('.service-menu').animate({ "margin-left": '-=480' }); $('#service-icon-button').animate({ "margin-left": '-=480' }); } else { $('.service-menu').animate({ "margin-left": '+=480' }); $('#service-icon-button').animate({ "margin-left": '+=480' }); } } else { if ($("#service-icon-button").css("margin-left") == "480px") { $('.service-menu').animate({ "margin-left": '-=480' }); $('#service-icon-button').animate({ "margin-left": '-=480' }); } } });。

优点：

Bullet正确定位
更改字体大小不会破坏子弹位置
没有额外的元素（no :: pseudo-elements）
适用于RTL和LTR，无需更改CSS。

缺点：

试试
到
找到
一：）

Answer 11

您还可以使用背景图像替换作为替代方案，让您完全控制垂直和水平定位。

查看this Question

的答案

Answer 12

ul
{
list-style-position:inside;
}

定义和用法

list-style-position属性指定列表项标记是否应出现在内容流的内部或外部。

来源：http://www.w3schools.com/cssref/pr_list-style-position.asp

Answer 13

似乎你可以（稍微）使用＆lt; li＆gt;上的填充来控制间距。标签

<style type="text/css">
    li { padding-left: 10px; }
</style>

问题在于，它似乎并不像你最后的例子那样让你匆匆忙忙地碾碎它。

为此你可以尝试关闭list-style-type并使用＆amp; bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

Answer 14

当您要将文本移到更靠近项目符号的位置时，即使您有多行文本，以下解决方案也能很好地发挥作用。

margin-right可让您将文本移到更靠近项目符号的地方

text-indent确保多行文本仍正确排列

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

Answer 15

More info w3schools ul{ list-style: none; }

ul li::before { content: "\2022"; color: black; display: inline-block; width: 8px;}

Answer 16

如果您只想减小项目符号点和文本之间的间距，似乎有一个更干净的解决方案：

li:before {
    content: "";
    margin-left: -0.5rem;
}

Answer 17

对padding-left:1em; text-indent:-1em标签使用<li>。
然后，将list-style-position: inside标记为<ul>。

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

Answer 18

您可以使用ul li:before和背景图片，并分别将position: relative和position:absolute分配给li和li:before。通过这种方式，您可以创建图像并将其放置在相对于li的任何位置。

Answer 19

您可以使用：

ul li { padding-inline-start: 15px; }

Answer 20

如果您的列表样式是 inside，那么您可以删除项目符号并创建自己的……例如（在 scss 中！）

            li {
                list-style: none;
                &:before {
                    content: '- ';
                }
            }

如果您的列表样式是 outside，那么您可以执行以下操作：

            li { 
                padding-left: 10px;
                list-style: none;
                &:before {
                    content: '* '; /* use any character you fancy~! */
                    position: absolute;
                    margin-left: -10px;
                }
            }

Answer 21

在每个<span style="display: flex;">内使用<li>。

Answer 22

您可以将padding-left元素赋予<li>。

CSS：控制项目符号和<li> </li>之间的空间

22 个答案: