CSS:子弹和<li> - 开卷题库

小开

你可以在列表项上使用padding-left属性(列表本身的不 !)

小开

似乎你可以(某种程度上)控制间距使用<li>标签。

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

问题是，它似乎不允许你像最后一个例子那样舒适地挤压它。

为此，您可以尝试关闭list-style-type并使用•

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

小开

最佳答案

将其内容放在相对位置的span中，然后可以通过span的left属性控制空间。

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>

小开

这个应该可以了。一定要把子弹对准外面。你也可以使用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>

小开

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

参见这个问题的答案

小开

总结一下这里的其他答案——如果你想更好地控制<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>

优点:

No image =少下载1个文件
通过调整<li>上的填充，你可以在项目符号和文本之间添加任意多的额外的水平空间
如果用户增加了文本大小，间距和项目符号大小应该按比例缩放

缺点:

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

(3)将文本包装在额外的元素中

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

优点:

No image =少下载1个文件
与选项(2)相比，您可以更好地控制子弹的位置——您可以将它移动到更靠近文本的位置(尽管我尽了最大努力，但似乎无法通过将padding-top添加到来改变垂直位置。不过，其他人可能有解决办法…)
项目符号的颜色可以与文本不同
如果用户增加了文本大小，项目符号应该按比例缩放(如果你设置了填充&边际是ems而不是px)

缺点:

需要额外的非语义元素(这可能会让你在SO上失去更多的朋友，而不是在现实生活中;)但对于那些希望他们的代码尽可能精简和高效的人来说，这是令人讨厌的，并且它违反了HTML / CSS应该提供的表示和内容的分离)
无法控制子弹的大小和形状

这里希望CSS4中有一些新的列表风格的功能，这样我们就可以创建更智能的项目符号，而不需要借助图像或额外的标记。

小开

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

小开

ul
{
list-style-position:inside;
}

定义和用法

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

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

小开

老问题了，但是:before伪元素在这里工作得很好。

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

干杯!

小开

list-style-type:内联:

它几乎和DSMann8的答案一样，但css代码更少。

你只需要

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


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

干杯

小开

在li上使用文本缩进效果最好。

文本缩进:-x px;会让子弹更靠近李，反之亦然。

在IE的旧版本中使用相对span的负左边可能无法正常工作。注:尽量避免给出位置。

小开

无序列表以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>

小开

下面是另一个使用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
}

我使用不可分割的空格，以便空格只影响列表元素的第一行(如果列表元素超过一行长)。你可以在这里使用填充。

小开

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

优点:

子弹自动定位正确
改变字体大小不会破坏项目符号的位置
没有额外的元素(也没有::伪元素)
适用于RTL和LTR而不改变CSS。

缺点:

试一试
来
找到
一:)

小开

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

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

小开

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

小开

当你想移动文字更靠近子弹时，即使你有多行文本，下面的解决方案也能很好地工作。

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>

小开

你可以给你的<li>元素一个padding-left。

小开

如果你的列表样式是inside，那么你可以删除项目符号并创建你自己的…例:(在scss!)

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

如果你的list style是outside，那么你可以这样做:

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

小开

更多信息w3schools ul { list-style: none; }

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

小开

如果你不想添加额外的标记，例如，你可以使用:

list-style-position: inside;将列表样式从左边移到更接近文本的位置
如果你仍然需要拉近列表项，你可以使用li元素上的::before选择器将文本移向项目符号。

    ul {
list-style-type: disc;
list-style-position: inside;
padding-left: 16px; /* or margin */
}


li::before {
content: '';
margin-left: -8px;
}

列表项文本
列表项文本
列表项文本
列表项文本

小开

有趣的是，当我们面对这样的问题时，大多数人会使用margin， padding和/或position属性。我知道我以前是这样的。如果我们都看错了呢?

在提供不同的解决方案之前，让我们试着更好地理解浏览器实现。如果我们查看WebKit中列表的用户代理样式表，我们会发现:

ul, menu, dir {
//...
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}


ol {
//...
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
li {
display: list-item;
text-align: match-parent;
}

其他浏览器也类似。列表缩进由ul和ol上的填充提供，而不是li上的填充。同样值得注意的是，在任何地方都找不到负定位、空白或缩进。那么是什么造成了子弹和文字之间的差距呢?

只有当我们尝试改变项目符号本身时，答案才会变得清晰。我将使用list-style-type属性来做到这一点，但不是给它一个像disc这样的标准值(它的定义由浏览器决定，在规范中是有点模糊)，我将给它一个带引号的字符串值:

ul {
list-style-type: "•";
}

<ul>
<li>Oh dear</li>
<li>what happened</li>
<li>to the bullet spacing?</li>
</ul>

我们可以通过在项目符号后面添加一个标准空格字符来重新引入空格。

ul.custom-bulleted {
list-style-type: "• ";
}

<ul class="custom-bulleted">
<li>Ah, that's better.</li>
<li>I've never cared for sticky bullets.</li>
</ul>


<ul>
<li>I'm an unstyled list.</li>
<li>I never have that problem!</li>
</ul>

我只能假设这类似于浏览器内部所做的事情——在项目符号后插入空格，本质上是将整个东西浮动到每个li的最左边。实际上，通过将默认的内部实现与允许我们定义自己的列表类型的@counter-style at-rule进行比较，规格基本上证实了这一点:

下面的样式表片段提供了的规范定义这些预定义的计数器样式:
@counter-style disc {
system: cyclic;
symbols: \2022;
/* • */
suffix: " ";
}

空格就在suffix中。

然而，还有一个未回答的问题……为什么非样式列表与我示例中的custom-bulleted类看起来不同?再次，这似乎归结为每个浏览器的不同内部实现。如果在不同的浏览器中比较它们，甚至自定义项目符号也会因浏览器而异。但我发现，你可以通过在li::marker上声明font-family来标准化字符串list-style-type的外观，这个特性在最初提出这个问题时是不可用的。

所以，回到最初的问题，如果我们想要控制项目符号和li之间的空格，我们可以通过改变空白字符的宽度来做到这一点，或者通过使用基于字符串的list-style-type来添加多个空白字符，其中包含广泛的浏览器支持。或者，我们可以用@counter-style定义一个自定义列表样式，但Safari目前不支持这种样式。

Unicode为我们提供了广泛的空格字符选项。以下是使用Em Space (U+2003)的列表:

ul {
list-style-type: "•\002003";
}

<ul>
<li>I like big gaps and I cannot lie</li>
<li>You other brothers can't deny</li>
</ul>

我知道这种方法并不是人们首先想到的。我们已经习惯了用边距、填充和缩进来对齐东西，以至于我们每次都倾向于使用这些工具。但在很多方面，浏览器的方式是有意义的。还有什么比在ul上用一个填充声明缩进整个列表，并让项目符号自行处理更简单的呢?(也许有一天，li::marker伪元素将支持填充，供那些认为他们需要更细粒度控制的人使用。不过我不会屏息以待。)

小开

没有人提到::标记属性

它允许将空间小设置为浏览器默认值。

ul li::marker {
content: '•'; /* as a side effect sets the space to zero */
font: 1.2em/1 sans-serif; /* adjust the bullet size */
}
ul li {
padding-left: .2em; /* have full control over the bullet space */
}

<ul>
<li>one
<li>two
<li>three
</ul>