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

最佳答案

无需在.product-header类中添加clear:both,但实际上您需要在.product-header .description类中添加clear:both,如下所示:

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


DEMO

补充说明:

clear CSS属性指定一个元素是可以位于该元素之前的浮动元素之后,还是必须向下移动(清除)到其下方。

关于html - 如何显示一个h1元素以及一个内联元素和一个p元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12311624/

10-14 14:52
查看更多