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