0

我之前问了一个关于将编辑/删除链接与 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 是一个很酷的产品

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

链接到 JSFiddle。

4

3 回答 3

2

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

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

演示

补充笔记：

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

于 2012-09-07T04:18:20.333 回答
1

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

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

于 2012-09-07T04:18:11.097 回答
1

Jsfiddle 演示

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

像这样

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

演示

于 2012-09-07T04:20:51.130 回答