Geek asks and answers

Best practice when displaying inline HTML elements next to h1 element?

I have a webpage that displays the name of the "product", and the edit / delete links next to it are on the same line. Example:

Product 1 (Change | Delete)

I want the product name to have a large font size, and the edit / delete buttons to have the usual font size (the same as paragraphs and much more). And I want them to appear inline, as an example above. I'm just wondering which HTML / CSS should I use to achieve this.

If I use the h1 element for the product name, it pushes the edit / delete links to the next line, since h1 is a block element. So I could override h1 in my CSS and do it display: inline, but messing around with the natural look of h1 seems like something that would be against best practices (?).

Another option is to simply not use the h1 element at all and use a pair of inline divs or spacing. But not using the h1 element for the top-level heading of the webpage, it seems like something that is also contrary to best practices ... I would also need to explicitly specify the font sizes, that is, I cannot use the default font size of the h1 and p elements which I use throughout the site.

What is the best approach in this situation? I know this is a simple / trivial question, but it would be nice to know one way or another.

+5
source share
5 answers

Using a wrapper divfor h1and floating, this can help you.

Is this what you are looking for ?: http://jsfiddle.net/Pt2BZ/

+1
source

Yes, these links do not belong to yours <h1>. One way is to put a header, something like this:

​<h1>Title</h1>
<div class="tools"> <!-- perhaps use an unordered list here and not div -->
    <a href="#">Edit</a>
    <a href="#">Delete</a> <!-- use a form with POST to delete instead -->
</div>

h1 { float:left; }

http://jsfiddle.net/JeuXt/

There is no universal best practice or method for part of the display (CSS), but you want your HTML to be clean and have everything semantically correct.

+3
source

- tt- display: run-in;. , h1 "" .

. , .

HTML

<h1>Page Title</h1>
<div class="links">
    ( <a href="#">Edit</a> | <a href="#">Delete</a> )
</div>​

CSS

h1 {     
    display: run-in;
    vertical-align: middle;
}

--- jsFiddle DEMO ---

-1

<span></span> CSS , . , , , , , .

: W3C <H1>:

-1

I would recommend using a tag <h1>and wrap the elements you want to make smaller in <span>. Then set the class to span and draw it using CSS, for example:

HTML

<h1>Product 1 <span class="foo">(Edit | Delete)​​​​​</span></h1>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

​.foo {
    font-size: 10px;
}​

JsFiddle example

-2
source

More articles:


All Articles