HTML列表僅限第一行縮進

即時嘗試實現某些我認爲很容易的事情，但現實是殘酷的。我有一個簡單的列表HTML列表僅限第一行縮進

項目1
項目2

我試圖得到以下結果：當文本的長度超過可用寬度和瀏覽器把它包起來，我希望它在子彈的下面，即僅在子彈所在的第一行應用縮進。它似乎列表項被呈現爲塊，所以有什麼建議？

2011-06-15 Anonymous

你可以做你的CSS，通過指定你的子彈是內部列表：

喜歡這個

ul{ 
    list-style: disc inside none; 
}

可以test it here

來源

2011-06-15 08:34:52 Shef

謝謝你，工作完美無瑕。 – Anonymous 2011-06-15 08:46:56

哇，謝謝Shef。 – SamGoody 2011-06-15 08:48:31

嘗試包裹在div的列表的內容是這樣的：

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

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

，給您<ul>或含有元素固定寬度，或者max-width如果你喜歡冒險的感覺。

來源

2011-06-15 08:29:21 Bojangles

將文本包裝到項目符號右側的原因是瀏覽器將整個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今天晚些時候。

來源

2011-06-15 08:31:26 SamGoody

嘗試列表樣式位置：內;爲<li>元素。更多信息http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position。

來源

2011-06-15 08:36:34

謝謝，我唯一忘記的是檢查w3規格。 – Anonymous 2011-06-15 08:46:48

HTML列表僅限第一行縮進

回答

相關問題