CSS 当文本分成多行时，如何修复有序列表中的行高？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13931910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I fix the line-height in ordered list when the text breaks in multiple lines?
提问by kat_indo
I have an ordered list and I used the 'line-height' on order to vertically align the icon/bullet I'm using with the text on the right.
我有一个有序列表，我使用了“行高”来将我正在使用的图标/项目符号与右侧的文本垂直对齐。
The problem now is that when the text is long and breaks in multiple lines it's too close together and I cannot find a way to fix it.
现在的问题是，当文本很长并分成多行时，它靠得太近了，我找不到修复它的方法。
Here's the HTML:
这是 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>
and here's the CSS:
这是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;
}
Also, here's a [link] to the page that actually has the issue.
此外，这里有一个 [link] 指向实际存在问题的页面。
回答by TehTooya
The fix I came up with is the following:
我想出的修复方法如下：
.fancy_list li {
line-height: 1.5em;
height: auto;
}
The line-height you were using was in fact too small for what you wanted. "1.5em" should be closer to what you were looking for.
您使用的行高实际上对于您想要的来说太小了。“1.5em”应该更接近你想要的。
Additionally, the height was set to 30px, which would force the list items to bleed on top of each other when there are two lines.
此外，高度设置为 30px，这将强制列表项在有两行时相互重叠。
Hope that helped.
希望有所帮助。
回答by Hielke
.fancy_list li {
padding-bottom:10px
}
}
Don't understand why this answer got negative response. This way you keep the right line-height, and able to adjust the space between list-items. This works perfectly for me :)
不明白为什么这个答案得到了否定的回应。这样您就可以保持正确的行高，并能够调整列表项之间的空间。这对我来说非常有效:)
回答by user3619039
.fancy_list li {
padding-bottom:10px
}
I think you are really expecting this
我想你真的很期待这个
