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

Question

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

此外,这是实际存在问题的页面的[链接].

Answer 1

我想出的修复方法如下:

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

你使用的线高实际上太小了你想要的."1.5em"应该更接近你想要的.

此外,高度设置为30px,当有两行时,这会强制列表项目在彼此之上流血.

希望有所帮助.

Answer 2

.fancy_list li {
 padding-bottom:10px

}

不明白为什么这个答案得到了否定的回应。这样您就可以保持正确的行高，并能够调整列表项之间的间距。这对我来说非常有效:)