CSS:控制bullet和<li>之间的空格
CSS:控制bullet和<li>之间的空格
提问于 2010-12-07 11:10:34
我想控制在<ol>或<ul>中，一颗子弹将其<li>向右推的水平空间有多大。
也就是说，不是总是有
* Some list text goes
here.我希望能够改变这一点
* Some list text goes
here.或
*Some list text goes
here.我环顾四周，但只能找到用于向左或向右移动整个块的指令，例如，http://www.alistapart.com/articles/taminglists/
回答 15
Stack Overflow用户
回答已采纳
发布于 2010-12-07 11:47:03
将它的内容放在一个相对定位的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>
Stack Overflow用户
发布于 2010-12-07 12:03:29
这个应该可以了。一定要把你的子弹放在外面。你也可以使用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>
Stack Overflow用户
发布于 2014-04-02 00:33:57
这是一个老问题，但是: here伪元素在这里工作得很好。
<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>干杯!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4373046
复制相关文章
相似问题
腾讯云开发者
