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

}

不明白为什么这个答案得到了否定回应。这样，您可以保持正确的行高，并能够调整列表项之间的空间。这对我来说很完美：）

Answer 3

尝试使用

ul {
  white-space: initial;
  margin-bottom: 0;
}

Answer 4

.fancy_list li {
     padding-bottom:10px

}

我认为你真的在期待这个

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

4 个答案: