HTML列表仅缩进第一行

Question

我试图实现一件我本以为很简单的事情，但现实是残酷的。我有一个简单的列表：

• 项目1
• 项目2

我想要达到以下的效果：当文本超过可用宽度并被浏览器换行时，我希望它能够出现在项目符号下面，即仅在第一行（即项目符号所在的行）应用缩进。似乎列表项被呈现为块级元素，有什么建议吗？

- Anonymous

Answer 1

您可以在CSS中完成此操作，通过指定项目符号在列表内部：
像这样

ul{
    list-style: disc inside none;
}

你可以在这里测试它

- Shef

Answer 2

尝试使用 list-style-position: inside; 属性来设定 <li> 元素的样式。更多信息请参考http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position。

- Mark Huk

---

谢谢，我唯一忘记的是检查w3规范。 - Anonymous

Answer 3

尝试将列表内容包装在类似这样的div中：

<ul>
    <li>
        <div>
            Item 1
        </div>
    </li>

    <li>
        <div>
            Item 2
        </div>
    </li>
</ul>

给你的<ul>或包含元素设定一个固定宽度，或者如果你感觉冒险，可以用max-width。

- Bojangles

Answer 4

文本右侧换行的原因是浏览器将整个列表项元素呈现在符号的右侧。它将始终在包含文本的元素内部换行。

最简单的解决方案是不使用内置的列表项符号。

相反，创建您喜欢的符号图像，并使用float:left将其放置在左上角。文本将围绕它换行，从而给您想要的结果。

<style>
    li { list-style-type:none; }
    img{ float:left; }
</style>
<ul>
    <li><img src='bullet'>my short text</li>
    <li><img src='bullet'>my very very long text</li>
</ul>

一些其他要点： 由于不同的浏览器在列表的填充和边距上有所不同，因此您应该对它们进行设置： （将其设置为您喜欢的边距）：

ul { padding:0; margin:30px }
ul li{ padding:0; margin:0 } 

另外，最好使用一个带有您首选符号背景的元素：

span.bullet {float:left; height:10px; width:10px; background:url(bullet.gif) no-repeat}

最后，一个更好的想法是根本不使用图像-而是在所有文本前缀中使用Unicode子弹。 或者，如果您的用户使用现代浏览器，请使用CSS在Unicode字符之前添加。 然而，我目前没有时间查找这个。也许今天晚些时候再看看。

- SamGoody