I have a webpage that displays the name of a "product", with edit/delete links next to it on the same line. Example:
Product 1 (Edit | Delete)
I want the product name to have a large font size, and the edit/delete buttons to have regular font size (i.e. same as paragraphs and whatnot). And I want them to appear inline, like the example above. I'm just wondering what HTML/CSS I should utilise in order to achieve this.
If I use a h1 element for the product name, it pushes the edit/delete links to the next line because h1 is a block element. So I could override h1 in my CSS and make display: inline, but messing with the natural appearance of h1 seems like something that would be against best practices (?).
The other option is to simply not use a h1 element at all and use a couple of inline divs or spans. But not using a h1 element for the top-level header of a webpage seems like something that would go against best practices too... It would also require me to explicitly set the font sizes, meaning I can't use the default font sizes of h1 and p elements, which I use throughout the rest of the website.
What's the best approach in this situation? I know it's sort of a simple/trivial question, but it would be nice to know anyway.
Using wrapper div for the h1 and floating it might help you.
Is this what you are looking for? : http://jsfiddle.net/Pt2BZ/