Html 列表项内的换行符会在行之间产生空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5140547/
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
line break inside a list item generates space between the lines
提问by Guy
I want to break line <br/>inside a <li>Like:
我想<br/>在一个<li>Like 中换行：
- First line
second line - Second li
- third li
- 第一行
第二行 - 二里
- 三里
but when doing so (both labels)- I get a space between them. margin and padding is 0 but still I get it.. any idea how to get rid of it? Thanks!
但是这样做时（两个标签）-我在它们之间留了一个空格。边距和填充为 0 但我还是明白了..知道如何摆脱它吗？谢谢！
采纳答案by Steven Ryssaert
You can alter the line-heightproperty in your css. Does that help ?
您可以更改line-heightcss 中的属性。这有帮助吗？
回答by JGilmartin
This is a simple solution...
这是一个简单的解决方案......
by adding a <br/><br/>in your <li>will add a blank line break directly underneath
通过<br/><br/>在你的<li>will 中添加一个直接在下面的空换行符
<ul>
<li>Line 1<br/><br/></li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4<br/><br/></li>
<li>Line 5</li>
</ul>
回答by Mikael Pelle
As a side note for Wordpress, and <br />will be automatically removed if present before the closing </li>.
作为一个方面说明的WordPress， 和<br />将被自动如果封闭之前存在除去</li>。
In a hacky way, you can use a zero-width non-joiner (‌) or an invisible separator (⁣).
以一种骇人听闻的方式，您可以使用零宽度的非连接‌符 ( ⁣)或不可见的分隔符 ( )。
In text mode, do a carriage return and insert a ‌before the closing </li>.
在文本模式下，做一个回车并‌在结束前插入一个</li>。
Example:
例子：
<ul>
<li>List item with a blank line below
‌</li>
<li>List item</li>
</ul>
回答by Yining Chen
For future people who end up on this question like me:
adding white-space: pre-wrap;to the <ul>worked for me! It also works with \nas an added bonus :)
对于未来的人谁最终会像我这样的问题：加入white-space: pre-wrap;到<ul>为我工作！它也可以\n作为额外的奖励:)
ul {
white-space: pre-wrap;
}
回答by Alpine
Try This
尝试这个
<ul>
<li>First Line</br>First Second Line</li>
<li>Second Line</li>
</ul>
回答by Keybonesabi
An improvement on Rudrik's Answer:
对 Rudrik 的回答的改进：
<UL>
<LI>First Line
<DD>Second Line</DD> <!-- No Space -->
</LI>
<LI>Third Line</LI>
<LI>Fourth Line</LI>
</UL>
Word!
单词！
回答by Rudrik
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
hope This may Help..
希望这可以帮助..
回答by feeela
Try playing around with "line-height".
尝试玩弄“行高”。
回答by Yuda Prawira
Might this work for you?
这对你有用吗？
<ul>
<li><div>First line</div> second line</li>
<li>Second li</li>
<li>third li</li>
</ul>
回答by A Bibbs
Using inline CSS, create a division with a fixed height, but no content, to create an empty line between list items, just like using nested lists. If you don't know much about CSS, just copy this solution and edit the height (in pixels) to change the empty line height. Place an empty line with this code anywhere in the lists, and set whatever height you desire for each empty line created.:
使用内联 CSS，创建一个具有固定高度但没有内容的分区，以在列表项之间创建一个空行，就像使用嵌套列表一样。如果您对 CSS 不太了解，只需复制此解决方案并编辑高度（以像素为单位）以更改空行高度。在列表中的任何位置放置一个带有此代码的空行，并为创建的每个空行设置您想要的任何高度。：
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4
<div style="height: 10px;">
</div>
</li>
<li>Line 5</li>
</ul>
