How to display a h1 element with an inline element next to it and a p element below it?
-
30-06-2021 - |
문제
I asked a question earlier about the best way to put edit/delete links inline with a h1 element. I was able to achieve this with the answers given, but I now have additional requirements where I need to display a paragraph below the h1 and edit/delete links.
So far, my HTML looks like this:
<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>
I'd like it to look like the following:
Product 1 (Edit | Delete)
Product 1 is a cool product...rest of page content
But I'm not sure what CSS to use to achieve this! Everything I do seems to put the description paragraph on the same line as the title, like so:
Product 1 (Edit | Delete)Product 1 is a cool product
...rest of page content
해결책
There is no need to add clear:both
in .product-header class but you really need to add clear:both
in .product-header .description class like given below:
.product-header .description {
clear:both;
}
Additional Notes:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.
다른 팁
You just need to add clear:both
to .description
:
Hi now clear your p tag class clear left
as like this
.product-header .description {
clear:left;
}