HTML 列表仅第一行缩进答案

【问题标题】：HTML List First-Line indent onlyHTML 列表仅第一行缩进
【发布时间】：2012-03-02 03:19:44
【问题描述】：

我试图实现一些我认为很容易的事情，但现实是残酷的。我有一个简单的清单

项目 1
项目 2

我试图得到以下结果：当文本长于可用宽度并且浏览器将其换行时，我希望它位于项目符号下方，即仅在项目符号所在的第一行应用缩进。似乎列表项呈现为块，所以有什么建议吗？

【问题讨论】：

标签： html css html-lists

【解决方案1】：

您可以在 CSS 上执行此操作，方法是将您的项目符号指定在列表中：

像这样

ul{
    list-style: disc inside none;
}

你可以test it here

【讨论】：

【解决方案2】：

试试 list-style-position: inside;对于<li> 元素。更多信息http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position。

【讨论】：

谢谢，我唯一忘记的是检查 w3 规格。

【解决方案3】：

尝试将列表内容包装在 div 中，如下所示：

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

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

给你的<ul>或包含元素一个固定的宽度，或者max-width，如果你喜欢冒险的话。

【讨论】：

【解决方案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 项目符号。或者，如果您的用户使用现代浏览器，请在 unicode 字符前面加上 CSS。但是，我现在没有时间查看这个。今天晚些时候拍拍。

【讨论】：