如何在多行文本中断时在有序列表中修复行高？

问题描述：

我有一个有序列表，我使用'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; 
    }

而且，这里的[链接]以实际有问题的网页。

答

我想出了解决方法是如下：

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

你正在使用的行高，其实是太小了，你想要的东西。 “1.5em”应该更接近您要查找的内容。

此外，高度设置为30px，这将强制列表项在两行之间出现在彼此顶部。

希望有帮助。

它绝对做到了！问题解决了！非常感谢TehTooya！虽然我如何对齐检查图像？当我更改代码时，文本显得有点低。 –

不错！有人可能想要为父'ul'设置一个负的“margin-bottom”来排除最后一行。 – SzieberthAdam

答

.fancy_list li { 
    padding-bottom:10px 

}

我想你是真的希望这

答

.fancy_list li { 
padding-bottom:10px

}

不明白为什么这个答案得到了否定的答复。这样你保持正确的行高，并能够调整列表项之间的空间。这对我来说完美:)

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

如何在多行文本中断时在有序列表中修复行高？

相关推荐