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

CSS: Control space between bullet and <li>

提问by erjiang

I'd like to control how much horizontal space a bullet pushes its <li>to the right in an <ol>or <ul>.

我想控制子弹<li>在<ol>or 中向右推动多少水平空间<ul>。

That is, instead of always having

也就是说，而不是总是有

*  Some list text goes
   here.

I'd like to be able to change that to be

我希望能够将其更改为

*         Some list text goes
          here.

or

或者

*Some list text goes
 here.

I looked around but could only find instructions for shifting the entire block left or right, for example, http://www.alistapart.com/articles/taminglists/

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

采纳答案by BalusC

Put its content in a spanwhich is relatively positioned, then you can control the space by the leftproperty of the span.

把它的内容放在一个span相对定位的a里面，然后你就可以通过a的left属性来控制空间span。

li span {
  position: relative;
  left: -10px;
}

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

回答by Joel

To summarise the other answers here – if you want finer control over the space between bullets and the text in a <li>list item, your options are:

总结这里的其他答案——如果你想更好地控制<li>项目符号和列表项中文本之间的空间，你的选择是：

(1) Use a background image:

(1) 使用背景图片：

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

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

Advantages:

好处：

• You can use any image you want for the bullet
• You can use CSS background-positionto position the image pretty much anywhere you want in relation to the text, using pixels, ems or %

• 您可以使用任何您想要的图像作为项目符号
• 您可以使用 CSSbackground-position将图像放置在与文本相关的任何您想要的位置，使用像素、em 或 %

Disadvantages:

缺点：

• Adds an extra (albeit small) image file to your page, increasing the page weight
• If a user increases the text size on their browser, the bullet will stay at the original size. It'll also likely get further out of position as the text size increases
• If you're developing a 'responsive' layout using only percentages for widths, it could be difficult to get the bullet exactly where you want it over a range of screen widths

• 向您的页面添加一个额外的（尽管很小）图像文件，从而增加页面权重
• 如果用户在浏览器上增加文本大小，项目符号将保持原始大小。随着文本大小的增加，它也可能会进一步偏离位置
• 如果您正在开发仅使用宽度百分比的“响应式”布局，则可能很难在一定范围的屏幕宽度上准确地将项目符号放在您想要的位置

2. Use padding on the <li>tag

2.在<li>标签上使用填充

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

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

Advantages:

好处：

• No image = 1 less file to download
• By adjusting the padding on the <li>, you can add as much extrahorizontal space between the bullet and the text as you like
• If the user increases the text size, the spacing and bullet size should scale proportionally

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

Disadvantages:

缺点：

• Can't move the bullet any closer to the text than the browser default
• Limited to shapes and sizes of CSS's built-in bullet types
• Bullet must be same colour as the text
• No control over vertical positioning of the bullet

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

(3) Wrap the text in an extra <span>element

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

Advantages:

好处：

• No image = 1 less file to download
• You get more control over the position of the bullet than with option (2) – you can move it closer to the text (although despite my best efforts it seems you can't alter the vertical position by adding padding-topto the <span>. Someone else may have a workaround for this, though...)
• The bullet can be a different colour to the text
• If the user increases their text size, the bullet should scale in proportion (providing you set the padding & margin in ems not px)

• 没有图像 = 少 1 个要下载的文件
• 与选项 (2) 相比，您可以更好地控制项目符号的位置——您可以将其移近文本（尽管我尽了最大努力，但似乎您无法通过添加padding-top到 来改变垂直位置<span>。其他人可能有一个解决方法，虽然...）
• 项目符号可以与文本颜色不同
• 如果用户增加了他们的文本大小，项目符号应该按比例缩放（前提是您在 em 中设置了填充和边距而不是 px）

Disadvantages:

缺点：

• Requires an extra unsemantic element (this will probably lose you more friends on SO than it will in real life ;) but it's annoying for those who like their code to be as lean and efficient as possible, and it violates the separation of presentation and content that HTML / CSS is supposed to offer)
• No control over the size and shape of the bullet

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

Here's hoping for some new list-style features in CSS4, so we can create smarter bullets without resorting to images or exta mark-up :)

希望在 CSS4 中有一些新的列表样式功能，这样我们就可以创建更智能的项目符号，而无需求助于图像或额外的标记:)

回答by Kevin

This should do it. Be sure to set your bullets to the outside. you can also use CSS pseudo elements if you can drop them in IE7 downward. I don't really recommend using pseudo elements for this kinda thing but it does work to control distance.

这应该做。一定要把子弹放在外面。如果您可以将它们在 IE7 中向下放置，您也可以使用 CSS 伪元素。我真的不建议为这种事情使用伪元素，但它确实可以控制距离。

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: '92';
  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>

回答by David Mann

Old question, but the :before pseudo element works well here.

老问题，但 :before 伪元素在这里效果很好。

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

It works really well and doesn't require many extra rules or html.

它工作得非常好，不需要很多额外的规则或 html。

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

Cheers!

干杯!

回答by larshaeuser

For list-style-type: inline:

对于列表样式类型：内联：

It's almost the same like DSMann8's answer but less css code.

它几乎与 DSMann8 的答案相同，但更少的 css 代码。

You just need to

你只需要

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

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

Cheers

干杯

回答by ClosureCowboy

You can use the padding-leftattribute on the list items (noton the list itself!).

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

回答by Ayush Maheshwari

Using text-indent on li works best.

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

text-indent: -x px; will move the bullet closer to li and vice-versa.

文本缩进：-x px；将使子弹更靠近 li，反之亦然。

Using relative on span the negative left might not work properly with older versions for IE. P.S- avoid giving positions as much as you can.

对 IE 的旧版本使用相对的范围负左可能无法正常工作。PS- 尽量避免给出位置。

回答by Lucas Demea

Here is another solution using css counter and pseudo elements. I find it more elegant as it doesn't require use of extra html markup nor css classes :

这是使用 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: '22 
    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>
a0 
<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

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

</body>
</html>
a0 
<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
a0'; //bullet unicode followed by 3 non breakable spaces
}

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

I use non breakable spaces so that the spacing only affects the first line of my list elements (if the list element is more than one line long). You could use padding here instead.

我使用不可破坏的空格，以便空格只影响我的列表元素的第一行（如果列表元素的长度超过一行）。您可以在此处使用填充。

回答by Ilya Novojilov

Old question but still relevant. I recommend using negative text-indent. list-style-positionmust be outside.

老问题，但仍然相关。我建议使用负数text-indent。 list-style-position必须是outside。

Pros:

优点：

• Bullet is properly automatically positioned
• Change font size does not break the bullet position
• No extra elements ( no ::pseudo-elements too )
• Works for both RTL and LTR without change in CSS.

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

Cons:

缺点：

• try
• to
• find
• one :)

• 尝试
• 到
• 找
• 一 ：）

回答by Harish Verma

An unordered list starts with the ul tag. Each list item starts with the The list items will be marked with bullets (small black circles) by default:

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

##代码##

Output:

输出：

##代码##

The text-indent property specifies the indentation of the first line in a text-block.
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

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

##代码##