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>

我希望它看起来如下：

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

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

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

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

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

Link to JSFiddle

Answer 1

无需在 .product-header 类中添加clear:both，但您确实需要在 .product-header .description中添加clear:both 类如下所示：

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

DEMO

附加说明：

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

Answer 2

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

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

Answer 3

的 Jsfiddle Demo 的

您好现在清除 p标记类 clear left

就像这样

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

的 Demo 的

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

3 个答案: