Question

我有以下列表：

alt text http://img210.imageshack.us/img210/2912/12922833.jpg

如何让第四个项目的文本环绕但缩进到与列表其余部分相同的级别？是否有一些CSS属性可以控制它？

Answer 1

尝试list-style-position：

li {
  list-style-position: outside;
}

当ricebowl记得发表评论时，您可能需要增加左边距或填充以使子弹点“保持不变”，因为而不是<li>内的子弹点，它们是现在放在外面。

Answer 2

如果它是一个真实的清单，那应该是默认的，但无论如何都要像Henrik所说的那样。

如果它不是一个真正的清单，而你只是在那里贴上一颗子弹的图像......那么......那就稍微难了。理想情况下，您将使用正确的列表（<ul><li>list item</li></ul>）

如果它是子弹的图像，您可以使用填充和绝对定位。如果它是子弹的HTML字符，那么你就塞满了。

Answer 3

不确定你的要求，我假设你希望它看起来像你上面的那样。因为默认情况下它不应该是那样的。

下面的代码示例将使其看起来像您的图像：

<style type="text/css">
    ul {
        width: 200px;
        padding: 0px;
        margin: 0px;
    }
    ul li {
        padding-left: 5px;
        text-indent: 20px;
    }
</style>

<ul>
    <li>text</li>
    <li>text text text text text text text text text text text text text text text text text text </li>
    <li>text </li>
</ul>

这段代码会让它看起来像你的要求：

<style type="text/css">
    ul {
        width: 200px;
    }
</style>

<ul>
    <li>text</li>
    <li>text text text text text text text text text text text text text text text text text text </li>
    <li>text</li>
</ul>

Answer 4

 ul li { padding-left: 25px; }

哪个CSS属性（如果有的话）可以控制它？

4 个答案: