CSS:控制项目符号和<li>之间的空间
erj*_*ang 162 html css html-lists
我想控制一个子弹<li>在一个<ol>或多个中向右推动多少水平空间<ul>.
也就是说,而不是总是拥有
* Some list text goes
here.
我希望能够改变它
* Some list text goes
here.
要么
*Some list text goes
here.
我环顾四周,但只能找到左右移动整个区块的说明,例如,http://www.alistapart.com/articles/taminglists/
Bal*_*usC 145
将其内容放在span相对定位的位置,然后您可以通过left属性来控制空间span.
li span {
position: relative;
left: -10px;
}- 实际上回答这个家伙问题的+1;)(尽管理想情况下在现实生活中应该有一个类,无论如何都要有良好的实践,以及语义学:如果将来任何javascript或新功能开发等都有充分的理由添加额外的跨度对你的内容,事情可能会变得混乱) (4认同)
Joe*_*oel 114
要总结其他答案 - 如果您希望更好地控制<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的内置项目符号的形状和大小
- 子弹必须与文本颜色相同
- 无法控制子弹的垂直位置
(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) - 你可以将它移到文本附近(虽然尽管我付出了最大的努力,但似乎你不能通过增加
padding-top来改变垂直位置<span>.其他人可能有解决这个问题的方法虽然......) - 子弹可以是与文本不同的颜色
- 如果用户增加其文本大小,子弹应按比例缩放(假设您在ems中设置填充和边距而不是px)
缺点:
- 需要一个额外的非语义元素(这可能会让你在SO上失去更多的朋友而不是现实生活中的朋友;)但是对于那些喜欢他们的代码尽可能精简和高效的人来说这很烦人,并且它违反了表达和内容的分离该HTML/CSS应该提供)
- 无法控制子弹的大小和形状
这里希望CSS4中有一些新的列表式功能,所以我们可以创建更智能的项目符号而无需借助图像或exta标记:)
- 很好的答案.要让#2工作,请确保将list-style-position保持为`outside`. (4认同)
- 我永远不会使用背景图片.您始终可以使用带有内容的:before元素:"•"; 然后,在元素之前使用填充和绝对位置来控制它. (2认同)
Kev*_*vin 32
这应该做到这一点.务必将子弹设置到外面.你也可以使用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>- 我不敢相信这个答案不被接受.它是100%的CSS,它不会添加任何多余的<span>元素,它让我终于理解为什么有一个内/外选项!(这是所提到的重复问题的公认答案......) (4认同)
- 附录:在现代浏览器(IE9 +,FF,Chrome等)中,在`<UL>`或`<LI>`上使用否定的`text-indent`来否定子弹点与`<LI之间的浏览器强制距离>`内容.也就是说,如上所示增加`padding-left`以增加距离并减少`text-indent`以根据需要减少项目符号点和内容之间的距离. (4认同)
Dav*_*ann 13
老问题,但是:之前伪元素在这里工作得很好.
<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>
干杯!
- 很好,简单的答案.我想补充说,设置`margin-left:-5px`(或任何值)将减少项目符号和`<li>`元素之间的空间 (3认同)
- 注意:这不支持悬挂缩进 (2认同)
小智 12
如果您只想减少项目符号和文本之间的间距，似乎有一个更清晰的解决方案：
li:before {
content: "";
margin-left: -0.5rem;
}
- 这不适用于多行项目符号，其中原始间距在第一行之后生效。 (4认同)
- 这应该是公认的答案；我浪费了很多时间来尝试调整上面的技巧。 (2认同)
小智 10
对于list-style-type:inline:
它与DSMann8的答案几乎相同,但css代码较少.
你只需要
<style>
li:before {
content: "";
padding-left: 10px;
}
</style>
<ul>
<li>Some content</li>
</ul>
干杯
- 这也适用于“list-style-position: inside”，这太棒了！ (2认同)
- 如果您希望间距更小，可以使用“margin-left: -10px”属性。 (2认同)
您可以padding-left在列表项上使用该属性(不在列表本身上!).
- 请注意,仅当`list-style-position`设置为默认的`outside`时才有效. (4认同)
- @eukras不幸的是，它不应该，因为它只允许_更多_空间。 (2认同)
小智 7
在li上使用text-indent效果最好.
text-indent:-x px; 将子弹移近李,反之亦然.
使用相对于跨度,负向左可能无法与IE的旧版本一起正常工作.PS-尽量避免给出位置.
这是使用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
}
我使用不可破坏的空格,以便间距仅影响我的列表元素的第一行(如果列表元素长度超过一行).你可以在这里使用填充.
小智 6
无序列表以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>
- 更改“UL”上的文本缩进似乎只是向左或向右移动整个“LI”，包括项目符号。在类型上使用“inside”或“outside”似乎并没有使文本与项目符号本身变得更近或更远。也许我做错了什么，但我不明白这是如何回答这个问题的。 (2认同)
小智 5
似乎您可以（在某种程度上）使用 <li> 标签上的填充来控制间距。
<style type="text/css">
li { padding-left: 10px; }
</style>
问题是它似乎不允许您像最后一个示例一样紧贴它。
为此，您可以尝试关闭列表样式类型并使用 •
<ul style="list-style-type: none;">
<li>•Some list text goes here.</li>
</ul>
旧问题，但仍然有意义。我建议使用负数text-indent。
list-style-position必须是outside。
优点：
- 项目符号已正确自动定位
- 更改字体大小不会破坏项目符号的位置
- 没有额外的元素（也没有:: pseudo-elements）
- RTL和LTR均可使用，而无需更改CSS。
缺点：
- 尝试
- 至
- 找
- 一个:)
- 我尝试使用此方法，但如果存在换行符，缩进对我不起作用。文本缩进只会缩进第一行。 (2认同)
小智 5
当您想要将文本移近项目符号时，即使您有多行文本，以下解决方案也很有效。
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>
没有人提到::标记属性
\n它允许将空间设置得更小。
\nul > li::marker {\n content: \'\xe2\x80\xa2\'; /* as a side effect sets the space to zero */\n font: 1.2em/1 sans-serif; /* adjust the bullet size */\n}\nul > li {\n padding-left: .2em; /* have full control over the bullet space */\n}<ul>\n <li>one\n <li>two\n <li>three\n</ul>