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。