如何在多行文本中斷時在有序列表中修復行高？

我有一個有序列表，我使用'line-height'爲了垂直對齊我使用的圖標/項目符號和右邊的文本。如何在多行文本中斷時在有序列表中修復行高？

現在的問題是，當文本很長，在多條線路中斷它靠得太近，我無法找到一個方法來解決它。

這裏的HTML：

<ul class="fancy_list"> 
<li>Value 1</li> 
<li>Value 2</li> 
<li>Value 3</li> 
<li>Value 4</li> 
<li>Value 5</li> 
</ul>

和這裏的CSS：

.fancy_list { 
    padding-left: 15px; 
    margin-bottom: 15px; 
    } 

    .fancy_list li { 
    list-style: none; 
    padding: 0 0 0 22px; 
    margin-top: 5px; 
    background: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/gbs-merchant-dashboard/img/red_sprite.png) -462px -164px repeat-y; 
    line-height: 15px; 
    height: 30px; 
    display:block; 
    float: left; 
    word-spacing: 0.5px; 
    letter-spacing: 0.4px; 
    }

而且，這裏的[鏈接]以實際有問題的網頁。

來源

2012-12-18 kat_indo

我想出瞭解決方法是如下：

.fancy_list li { 
    line-height: 1.5em; 
    height: auto; 
}

你正在使用的行高，其實是太小了，你想要的東西。「1.5em」應該更接近您要查找的內容。

此外，高度設置爲30px，這將強制列表項在兩行之間出現在彼此頂部。

希望有幫助。

來源

2012-12-18 11:36:06 TehTooya

它絕對做到了！問題解決了！非常感謝TehTooya！雖然我如何對齊檢查圖像？當我更改代碼時，文本顯得有點低。 –

不錯！有人可能想要爲父'ul'設置一個負的「margin-bottom」來排除最後一行。 – SzieberthAdam

.fancy_list li { 
    padding-bottom:10px 

}

我想你是真的希望這

來源

2015-01-07 07:26:41 user3619039

.fancy_list li { 
padding-bottom:10px

}

不明白爲什麼這個答案得到了否定的答覆。這樣你保持正確的行高，並能夠調整列表項之間的空間。這對我來說完美:)

來源

2016-05-22 09:57:24 Hielke

適合我！行高在包含大量文本的單行中添加空格。 – Kieveli

如何在多行文本中斷時在有序列表中修復行高？

回答

相關問題