在html列表元素中包含空行的正确方法是什么?

问题描述 投票:1回答:4

假设我有一个清单:

  • 第一项
  • 第二项真的很长。事实上,它由几个不同的段落组成。我真的希望能够在第二句和第三句之间休息一下,因为否则它会聚在一起并且真的很难读。
  • 第三项

在HTML / CSS中实现此目的的正确方法是什么:

  • 第一项
  • 第二项真的很长。事实上,它由几个不同的段落组成。 我真的希望能够在第二句和第三句之间休息一下,因为否则它会聚在一起并且真的很难读。
  • 第三项

似乎有一些选择是<p><div>,或许<span>与适当的display风格。可能还有更多的选择,但我希望有一个正确/推荐的方法。

为了确定这个问题的范围,我们假设现代浏览器支持HTML5 / CSS3。

编辑:对于投票结束问题的人,您能否就其原因发表评论?如果我应该遵循一些明显的指导方针,请链接到它。鉴于在HTML / CSS中通常有多种方法可以完成,我认为可以问一下是否存在“正确”的方法。

html css html5 css3
4个回答
6
投票

<p>代表段落,所以这将是推荐的方式,但是,所有其他方式也是有效的。


4
投票

不建议使用<span>,因为它不是块元素。

你可以使用<br>来破解:

<ul>
  <li>
    Item One
  </li>

  <li>
    Item Two is really long. As a matter of fact, it's made up of a couple different paragraphs.
    <br><br>I'd really like to be able to have a break between the second and third sentence because otherwise it gets all bunched together and is really difficult to read.
  </li>
  <li>
    Item Three
  </li>
</ul>

你也可以使用一个空的block元素并使用CSS设置它的大小:

.spacer {
  height: 10px;
}
Item Two is really long. As a matter of fact, it's made up of a couple different paragraphs.
<div class="spacer"></div>I'd really like to be able to have a break between the second and third sentence because otherwise it gets all bunched together and is really difficult to read.

或者<p>标签:

    <p>Item Two is really long. As a matter of fact, it's made up of a couple different paragraphs.</p>
    <p>I'd really like to be able to have a break between the second and third sentence because otherwise it gets all bunched together and is really difficult to read.</p>

0
投票

只是想补充一点,将<br><p>放在<li>之外,但在父<ul>内部用html验证器检查时会抛出错误。

所以这被接受了:

<ul>
    <li>
       .....
    <br>
    </li>
</ul>

而这不是。

<ul>
    <li>
       .....
    </li>
    <br>
</ul>

对于许多人来说这可能是清楚或合乎逻辑的,但我今天必须学习这一点,特别是因为这个线程鼓励了我 是正确的方法(=元素),但仅仅是我的位置是错误的。


0
投票

我使用<hr>,因为它是表示那种中断的语义标签。

由于历史原因,元素显示为水平线,因此您需要一些CSS来更改视觉效果。

<ul>
  <li>
    Item One
  </li>

  <li>
    Item Two is really long. As a matter of fact, it's made up of a couple different paragraphs.
    <hr style="border: none;">I'd really like to be able to have a break between the second and third sentence because otherwise it gets all bunched together and is really difficult to read.
  </li>
  <li>
    Item Three
  </li>
</ul>
© www.soinside.com 2019 - 2024. All rights reserved.