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

也就是说,不是一直都有

*  Some list text goes
   here.

我希望能把它变成

*         Some list text goes
          here.

or

*Some list text goes
 here.

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


当前回答

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

李跨度{ 位置:相对; 左:-10 px; } < ul > <李> < span >第1项< / span > < /李> <李> < span >第二项< / span > < /李> <李> < span >项3 < / span > < /李> < / ul >

其他回答

如果你的列表样式是在里面,那么你可以删除子弹并创建你自己的…例:(在scss!)

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

如果你的列表样式是外部的,那么你可以这样做:

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

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

如果您不希望添加额外的标记,例如<span>,您可以使用:

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

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

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

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

似乎您可以(在某种程度上)使用<li>标记上的填充来控制间距。

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

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

为此,您可以尝试关闭list-style-type并使用&bull;

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

当您希望将文本移动到更靠近项目符号的位置时,即使您有多行文本,以下解决方案也很有效。

右边距使您可以将文本移动到更靠近项目符号的位置

文本缩进确保多行文本仍然正确对齐

李:{之前 内容:“”; margin-right: 5 px;/*调整使文本更靠近项目符号*/ } 李{ indent: 5 px;/*对齐文本的第二行*/ } < ul > <li> Item 1…李< / > <li> Item 2…这个项目有大量的文本,导致第二行!请注意,第二行是如何与第一行对齐的!李< / > <li> Item 3…李< / > < / ul >