HTML列表仅第一行缩进

如何解决HTML列表仅第一行缩进

| 我试图实现我认为很简单的目标，但现实是残酷的。我有一个简单的清单项目1 项目2 我正在尝试获得以下结果：当文本长于可用宽度并且浏览器将其环绕时，我希望它位于项目符号下方，即仅在项目符号所在的第一行应用缩进。列表项似乎呈现为块，所以有什么建议吗？

解决方法

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

ul{
    list-style: disc inside none;
}

你可以在这里测试 , 尝试list-style-position：inside;表示“ 1”元素。更多信息http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position。 , 尝试将列表内容包装在div中，如下所示：

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

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

并给您的ѭ3containing或包含元素固定宽度，如果您喜欢冒险，则给max-width。 , 文字环绕在项目符号右侧的原因是浏览器将整个list-item元素呈现在项目符号右侧。它将始终将文本包装在包含文本的元素内。最简单的解决方案是不使用内置的列表项目符号。而是创建所需子弹的图像，然后使用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。但是，我现在还没有时间进行查找。今天晚些时候。