將文本包裝到項(xiàng)目符號(hào)右側(cè)的原因是瀏覽器將整個(gè)list-item元素呈現(xiàn)在項(xiàng)目符號(hào)的右側(cè)。它將始終將文本包裝在包含文本的元素中。

最簡(jiǎn)單的解決方案是不使用內(nèi)置列表項(xiàng)目項(xiàng)目符號(hào)。

取而代之的是創(chuàng)建一個(gè)你喜歡的子彈的圖像并使用float：left將它放在左上角。文本將圍繞它并給你你想要的結(jié)果。

li { list-style-type:none; }

img{ float:left; }

• my short text
• my very very long text

的其他一些觀點(diǎn)： 由于不同的瀏覽器上的填充不同，名單的利潤，你應(yīng)該將它們?cè)O(shè)置： (設(shè)為您的首選保證金)：

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}

最后，一個(gè)更好的想法是完全不使用圖像 - 但而不是使用unicode項(xiàng)目符號(hào)為所有文本加上前綴。 或者，如果您的用戶使用現(xiàn)代瀏覽器，請(qǐng)?jiān)贑SS中添加unicode字符。 但是，我現(xiàn)在沒有時(shí)間來查看這個(gè)。 Praps今天晚些時(shí)候。

總結(jié)

以上是生活随笔為你收集整理的html列表变成三个一行,HTML列表仅限第一行缩进的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。