CODEWITHSUNDEEP
htmlcss
Reloader
Reloader

Reputation: 720

Why I can't display header and navigation links in one line?

<!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?

Upvotes: 1

Views: 657

Answers (4)

Rishabh
Rishabh

Reputation: 1

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.

Upvotes: 0

Philipp Meissner
Philipp Meissner

Reputation: 5482

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

Upvotes: 3

user3553031
user3553031

Reputation: 6214

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.

Upvotes: 1

no_juan
no_juan

Reputation: 67

    <!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>

Upvotes: -1

Related Questions