代码之家 › 专栏 › 技术社区 › XåpplI'-I0llwlg'I -

如何显示旁边有内联元素、下面有p元素的h1元素?

html-heading block css html

0

XåpplI'-I0llwlg'I - · 技术社区 · 13 年前

我问 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 。

3 回复 | 直到 9 年前

1

2

Ahsan Khurshid 13 年前

无需添加 clear:both 在里面 .产品标题 类,但您确实需要添加 清除:两者 在里面 .产品标题.说明 类如下所示:

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

DEMO

附加说明:

这个 clear CSS属性指定一个元素是可以位于其前面的浮动元素旁边,还是必须向下移动(清除)。

2

1

Michael Peterson 13 年前

你只需要添加 clear:both 到 .description 以下为:

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

3

1

Rohit Azad Malik 13 年前

Jsfiddle Demo

嗨,现在清空你的 p标记类 clear left

像这样

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

Demo