我想控制在<ol>
或<ul>
中,一颗子弹将其<li>
向右推的水平空间有多大。
也就是说,不是总是有
* Some list text goes
here.
我希望能够改变这一点
* Some list text goes
here.
或
*Some list text goes
here.
我环顾四周,但只能找到用于向左或向右移动整个块的指令,例如,http://www.alistapart.com/articles/taminglists/
发布于 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>
发布于 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>
发布于 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>
干杯!
https://stackoverflow.com/questions/4373046
复制相似问题