列表项内的换行会在行间产生空白。

Question

我想在<li>中使用换行标签<br/>，例如：

• 第一行
  第二行
• 第二个li
• 第三个li

但是无论在哪种标签之间使用，它们之间都会出现一个空格。即使将边距和内边距设为0，也会出现这个问题。有没有什么方法可以解决呢？感谢！

- Guy

---

+1 嗯，我本来想回答的，但我意识到除了一些技巧外，我也不知道。好问题。 - Neil

你能给我们展示一下你的实时例子吗？没有它很难告诉你发生了什么 :) - Kyle

你好，你可能需要提供你的CSS代码，因为你展示的列表应该是UL的默认功能，如果你没有太多修改CSS的话，它应该可以正常工作。正如Uw Concept所说，你应用的行高可能太大了，显示出了比想要的更多的空间。谢谢。 - sweetroll

我认为OP是在询问LI之间可能存在的边距/填充，而不是<br>问题。等待代码。 - Kyle

似乎是行高问题，就像feela所建议的那样。但这很奇怪，因为即使行高非常短，问题也会出现。只有在自动情况下才能解决。请参见以下链接以获取示例：http://mysports-test.co.il/TestPAge.htm - Guy

尽管这是一个奇怪的问题，但Feeela和Uw Concept引导我走上了正确的道路。我如何知道谁先回答，以便我可以标记为答案？（两个人似乎都是1小时前回答的）。谢谢。 - Guy

Answer 1

通过在您的<li>中添加<br/><br/>，将直接在下方添加一个空白换行符，这是一种简单的解决方法。

<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>

- JGilmartin

---

就我个人而言，由于我使用严格的HTML，所以我更喜欢采用严格的HTML解决方案... 这是一个好的选择 :P - Chris Cirefice

Answer 2

您可以在CSS中更改line-height属性。这有帮助吗？

- Steven Ryssaert

---

虽然我在这方面遇到了一个大问题，但似乎这就是问题所在——当我设置行高时，内部行之间会有空格。当行高为正常时，就没有空格。谢谢！ - Guy

只是出于好奇，你使用Doctype HTML STRICT声明还是Transitional？这也可能导致你的问题。如果你使用Strict，你可以确信你的布局在大多数常见的浏览器中都会显示相同。 - Steven Ryssaert

实际上，即使切换到严格模式，仍然存在相同的问题。 - Guy

Answer 3

对于像我一样看到这个问题的未来人： 在 <ul> 中添加 white-space: pre-wrap; 对我有用！它也可以通过 \n 来使用额外的奖励 :)

ul {
  white-space: pre-wrap;
}

- Yining Chen

Answer 4

作为 WordPress 的一个说明， 和<br />如果在结束标签</li>之前出现，将会被自动删除。

你可以使用零宽度不连字 (‌) 或隐形分隔符 (⁣) 来达到一种取巧的方式。

在文本模式下，执行回车并在结束标签</li>之前插入一个‌。

例如：

<ul>
  <li>List item with a blank line below
  &zwnj;</li>
  <li>List item</li>
</ul>

- Mikael Pelle

Answer 5

  <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 

希望这可以帮助到您。

- Rudrik

---

我已经使用了dl、dt和dd。希望这是你要找的。 - Rudrik

Answer 6

试一下

<ul>
    <li>First Line</br>First Second Line</li>
    <li>Second Line</li>
</ul>

点击这里查看

- Alpine

Answer 7

一种对Rudrik的回答进行改进的方法：

Rudrik's Answer：

<UL>
   <LI>First Line
      <DD>Second Line</DD> <!-- No Space -->
   </LI>
   <LI>Third Line</LI>
   <LI>Fourth Line</LI>
</UL>

Word!

- Keybonesabi

Answer 8

尝试使用。

li{
    float: none;
}

- Gabriel Arghire

Answer 9

这个对你有用吗？

<ul>
    <li><div>First line</div> second line</li>
    <li>Second li</li>
    <li>third li</li>
</ul>

- Yuda Prawira

Answer 10

添加一个带有换行的段落：

<li>
  <p>...</br></p>
</li>

- Hou