html - 如何显示一个 h1 元素，旁边有一个内联元素，下面有一个 p 元素？

Question

我问了a question早些时候关于将编辑/删除链接与 h1 元素内联的最佳方法。我能够通过给出的答案实现这一点，但我现在有额外的要求，我需要在 h1 下方显示一个段落并编辑/删除链接。

到目前为止，我的 HTML 看起来像这样:

<div class="product-header">
  <div class="title">
    <h1>Product 1</h1>
  </div>
  <div class="admin">
      (<a href="#">Edit</a> | <a href="#">Delete</a>)
  </div>
  <p class="description">Product 1 is a cool product</p>
</div>

我希望它看起来像下面这样:

Product 1 (Edit | Delete)
Product 1 is a cool product

...rest of page content

但我不确定要使用什么 CSS 来实现此目的!我所做的一切似乎都将描述段落与标题放在同一行，如下所示:

Product 1 (Edit | Delete)Product 1 is a cool product

...rest of page content

Link to JSFiddle .

Answer 1

没有必要在.product-header类中添加clear:both，但你确实需要在<中添加clear:both strong>.product-header .description 如下所示的类:

.product-header .description {
    clear:both;
}​

DEMO

附加说明:

clear CSS 属性指定一个元素是可以紧挨着它前面的 float 元素，还是必须向下移动(清除)在它们下面。