HTML列表仅限第一行缩进

Question

即时尝试实现某些我认为很容易的事情，但现实是残酷的。我有一个简单的列表

• 项目1
• 项目2

我试图得到以下结果：当文本的长度超过可用宽度和浏览器把它包起来，我希望它在子弹的下面，即仅在子弹所在的第一行应用缩进。它似乎列表项被呈现为块，所以有什么建议？

Answer 1

你可以做你的CSS，通过指定你的子弹是内部列表：

喜欢这个

ul{ 
    list-style: disc inside none; 
} 

可以test it here

Answer 2

尝试包裹在div的列表的内容是这样的：

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

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

，给您<ul>或含有元素固定宽度，或者max-width如果你喜欢冒险的感觉。

Answer 3

将文本包装到项目符号右侧的原因是浏览器将整个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项目符号为所有文本加上前缀。 或者，如果您的用户使用现代浏览器，请在CSS中添加unicode字符。 但是，我现在没有时间来查看这个。 Praps今天晚些时候。

Answer 4

尝试列表样式位置：内;为<li>元素。更多信息http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position。