如何显示一个 h1 元素，旁边有一个 inline 元素，下面有一个 p 元素？答案

【问题标题】：How to display a h1 element with an inline element next to it and a p element below it?如何显示一个 h1 元素，旁边有一个 inline 元素，下面有一个 p 元素？
【发布时间】：2012-09-07 04:14:32
【问题描述】：

我早些时候询问过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>

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

产品 1（编辑 | 删除）
产品 1 是一个很酷的产品

...页面内容的其余部分

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

产品 1（编辑 | 删除）产品 1 是一个很酷的产品

...页面内容的其余部分

Link to JSFiddle.

【问题讨论】：

标签： html css block html-heading

【解决方案1】：

没有必要在 .product-header 类中添加clear:both，但您确实需要在 .product-header .description 类中添加clear:both，例如下面给出：

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

DEMO

附加说明：

clear CSS 属性指定一个元素是否可以位于其前面的浮动元素旁边，或者必须在其下方向下移动（清除）。

【讨论】：

【解决方案2】：

您只需将clear:both 添加到.description：

http://jsfiddle.net/kDQLZ/3/

【讨论】：

【解决方案3】：

Jsfiddle Demo

您好，现在清除您的 p 标签类 clear left

像这样

.product-header .description {
 clear:left;   
}

Demo

【讨论】：