【问题标题】:When to use <br> line breaks vs CSS positioning?何时使用 <br> 换行符与 CSS 定位?
【发布时间】:2011-04-25 15:35:34
【问题描述】:

我经常想知道如何正确使用&lt;br&gt; 换行符。似乎它们经常被错误地用于定位或清除应该使用 CSS 的内容。

W3schoools.org 表示将 &lt;br&gt; 用于空白行,但不适用于 creating or separating 段落。查看W3C HTML5 spec draft,更清楚的是&lt;br&gt; 将用于需要换行符的内容,例如地址行或诗歌中的空白行,这是作者的意图。

但我仍然对任何其他人可能有的进一步澄清或意见感兴趣。我经常发现自己选择不使用&lt;br&gt; 标签,而只是使用所需的清除、边距、填充等来设置元素的样式,以创建所需的空间。

并不是说它非常重要,但这是一个让我想到这个例子的例子,一个流行的(“权威”)网站使用了 &lt;br&gt;,我不确定它是否完全语义化。在这里,我将通过 CSS 从其兄弟姐妹中清除 &lt;a&gt;

<p>Lorem ipsum dolor sit amet, consectetur tempor laborum.</p>
<br>
<a href="#readmore">more &gt;&gt;</a>

【问题讨论】:

  • 几个很好的答案......但我刚刚意识到发布“讨论”类型的问题是一个多么大的错误......我无法只选择一个复选标记!
  • 如果你喜欢某人的回答,你应该给他们点赞 :) 我是唯一一个点赞的人,尽管正如你所说,有一些好的答案。我可能只是碰巧是最快的,但@James 也提出了一个很好的观点。
  • @brandonjp “分离”链接已损坏(其他可能也是如此)。
  • @LawrenceJohnston 谢谢。看起来 W3schools 移动了 HTML5 指南。现已全部更新。
  • 我知道这是一个老问题,但本着 HTML5 发布的精神,这里是最新最好的! w3.org/TR/2014/REC-html5-20141028/…

标签: html css w3c semantics semantic-markup


【解决方案1】:

对我来说,换行符只能在段落内使用以表示新行。过去在段落之间添加换行符是使用过的,当时 HTML 看起来像杂碎,而 HTML 文档的语义看起来像学龄前的人使用 Dreamweaver。

我个人依靠边距和填充来分隔内容,如果我必须使用&lt;br /&gt;,这意味着我做错了。我认为地址行是正确使用的完美示例,我会坚持那些场景。

【讨论】:

  • 我同意,
    属于内容,而不是样式。但我必须管理我发现自己不时作弊.. :s (当谈到 IE6 和浮动时)
  • 安德烈 - 与我的答案没有真正的关系,但我发现 clearfix (positioniseverything.net/easyclearing.html) 是天赐之物。我永远不会使用另一个清除元素,永远。 :)
  • clearfix 的替代方法是在包含 &lt;div&gt; 上使用 overflow:autooverflow:hidden
  • 对于格式化地址,我想将它们放在列表中更有意义。
  • @Marko,HTML5 规范说&lt;p&gt; 元素是格式化地址的最佳方式。当然,如果您使用the vCard microdata format,您将获得奖励积分!
【解决方案2】:

当换行符在无样式文档中具有语义时。

正如有人所说,诗歌就是一个很好的例子——传统上,诗歌是在行与行之间换行的。地址也是如此。用段落元素标记诗行或地址是没有意义的,因为它们更适合整个地址或诗节。

【讨论】:

    【解决方案3】:

    我同意规范,br 应该用于在段落中创建新的文本行。从语义上讲,它是有意义的——一个段落是一个带有一些顶部或底部边距的文本块,而 br 指定没有边距,只是一个具有相同行高/行间距的换行符。

    【讨论】:

      【解决方案4】:

      当客户可能能够编辑内容时,我会使用换行符 - 如果他们只使用返回键而不是对为什么页面上某些元素周围出现空格感到困惑,这会更容易。不过,这几乎总是在文本区域内,没有理由使用 &lt;br /&gt; 定位其他任何内容

      【讨论】:

        【解决方案5】:

        中断标签(单独使用时应为&lt;br /&gt;

        必须用于换行而不是用于定位,特别是因为您只换行。

        后面的概念应该和你使用回车键一样。

        希望对你有帮助。

        【讨论】:

        • 在 HTML5 中,&lt;br&gt;&lt;br /&gt; 都有效。为您的项目选择两者之一并与&lt;img&gt;&lt;p&gt;等其他标签一致地使用它确实有意义
        • 我很确定有些 IE 不阅读它们。但我同意我不应该关心
        【解决方案6】:

        我的看法:

        &lt;br&gt; 将在内容需要 换行符,例如地址的行 或诗歌中的空白行,其中 作者有意为之。

        (话虽如此,我偶尔也会用它们来分隔段落)&lt;/ br&gt;

        【讨论】:

        • 我认为hr 可能更适合分隔段落(没有强关系)
        猜你喜欢
        • 2012-06-11
        • 2018-01-21
        • 2013-06-28
        • 2011-11-14
        • 1970-01-01
        • 2022-08-07
        • 1970-01-01
        • 1970-01-01
        • 2015-12-02
        相关资源
        最近更新 更多