1
<!DOCTYPE html>
<html>
<body>

<header style="display: inline"><h1><a href="index.html">:::Lorem ipsum dolor sit amet</a></h1>

<nav>
<ul>
    <li><a href="kontakt.html" title="Kontakt informacije">Kontakt Informacije</a></li>
    <li><a href="galerija.html" title="Galerija slika">Galerija slika</a></li>
    <li id="empty"><a href="onama.html" title="O nama">O nama</a></li>
</ul>
</nav>
</header>
</body>
</html>

Although <header style="display: inline">, the <h1> element is not aligned with the <ul> element, but rather <ul> element is placed beneath <h1>. Tried <header style="display: inline-block">, but to no avail. Shouldn't display: inline property align items in line?

Reloader
  • 742
  • 11
  • 22
  • 1
    Did you mean `` or ``? you seem to have no closing for `

    ` and two closings for `
    `

     – T J Jul 05 '14 at 17:20
  • First thing, is that your HTML is not well formed. You have 2 closing header tagas one in the same line where you open your header and other one between nav and header closing. What is the correct one? – jtorrescr Jul 05 '14 at 17:21
  • 2
    You can just float the elements like so: http://jsfiddle.net/EJ7K4/1/ – BuddhistBeast Jul 05 '14 at 17:23
  • 1
    Or you could always stick with inline-blocks for the inner elements like so: http://jsfiddle.net/EJ7K4/3/ – BuddhistBeast Jul 05 '14 at 17:27
  • Is there preferable way? I want to make tabbed navigation with those navigation links by using css. Which method, floating or inline-block applied to all elements, would be more appropriate? – Reloader Jul 05 '14 at 17:34

4 Answers4

3

nav, h, and header are all block elements. You would have to add the display: inline; to all the elements that are predefined block-elements. This code here does the job:

header, nav, ul, li, h1 {
    display: inline;
}

You can find it applied in the below demo.

DEMO

BuddhistBeast
  • 2,652
  • 2
  • 21
  • 29
Philipp Meissner
  • 5,273
  • 5
  • 34
  • 59
  • Since the `nav` is in the `header`, you don't even have to change the display of the header, just the contents. Alternatively, you can float the `h1` to the left. – Mr Lister Jul 05 '14 at 18:21
1

Try setting display: inline-block on both your header and nav:

<!DOCTYPE html>
<html>
  <body>
    <header style="display: inline-block"><h1><a href="index.html">:::Lorem ipsum dolor sit amet</a></h1></header>

    <nav style="display: inline-block">
      <ul>
        <li><a href="kontakt.html" title="Kontakt informacije">Kontakt Informacije</a></li>
        <li><a href="galerija.html" title="Galerija slika">Galerija slika</a></li>
        <li id="empty"><a href="onama.html" title="O nama">O nama</a></li>
      </ul>
    </nav>
  </body>
</html>

Also, remove the extraneous </header> at the end.

user3553031
  • 5,990
  • 1
  • 20
  • 40
0

As your h1 and nav tags are inside header you could use the below css:

h1, nav, li {
    display: inline-block;
}

also, refer to a link! for knowing why you are using the above.

And refer a link! to know about block-level elements.

Community
  • 1
  • 1
Rishabh
  • 1
-1
    <!DOCTYPE html>
    <html>
    <body>

    <header ><h1 style="display: inline;float:left;"><a href="index.html">:::Lorem ipsum dolor sit amet</a></h1>

    <nav>
    <ul>
        <li style="display:inline;float:left;margin-top:35px;margin-left:20px;"><a href="kontakt.html" title="Kontakt informacije">Kontakt Informacije</a></li>
        <li style="display:inline;float:left;margin-top:35px;margin-left:20px;"><a href="galerija.html" title="Galerija slika">Galerija slika</a></li>
        <li  style="display:inline;float:left;margin-top:35px;margin-left:20px;" id="empty"><a href="onama.html" title="O nama">O nama</a></li>
    </ul>
    </nav>
    </header>
    </body>
    </html>
no_juan
  • 57
  • 3
  • [Why use CSS](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS) – T J Jul 05 '14 at 17:29