4

我有一个有序列表，我使用“行高”来垂直对齐我正在使用的图标/项目符号与右侧的文本。

现在的问题是，当文本很长并且分成多行时，它太靠近了，我找不到修复它的方法。

这是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;
    }

此外，这里有一个 [链接] 到实际存在问题的页面。

4

4 回答 4

9

我想出的修复方法如下：

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

实际上，您使用的 line-height 对于您想要的而言太小了。“1.5em”应该更接近您正在寻找的内容。

此外，高度设置为 30 像素，这将迫使列表项在有两行时相互重叠。

希望有帮助。

于 2012-12-18T11:36:06.663 回答
5 
.fancy_list li {
 padding-bottom:10px

}

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

于 2016-05-22T09:57:24.163 回答
1

尝试使用

ul {
  white-space: initial;
  margin-bottom: 0;
}
于 2021-03-24T14:13:25.940 回答
0 
.fancy_list li {
     padding-bottom:10px

}

我想你真的很期待这个

于 2015-01-07T07:26:41.987 回答