CODEWITHSUNDEEP
htmlcssalignment
acanana
acanana

Reputation: 61

Aligning ul at the right of navbar, strange behaviour

I'm trying to align an ul at the right of my navbar, but it goes too far on the right and my list items get stacked. Any idea why and how to fix this? I've made a Codepen to show what's going on.

Here's my html:

<nav id="navbar">
  <div id="navbar-container">
    <h1><a href="#">MOTEL CAMPO</a></h1>
    <ul id="main-nav">
      <li><a href="#">Programme</a></li>
      <li><a href="#">Archives</a></li>
      <li><a href="#">Infos</a></li>
      <li><a href="#">Newsletter</a></li>
    </ul>
  </div>
</nav>

And the css:

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "l10medium", Helvetica, Verdana, sans-serif;
}

nav {
  width: 100%;
  height: 50px;
}

nav #navbar-container {
  width: auto;
  height: 50px;
  padding: 0 100px;
  background-color: white;
}

nav h1 {
  display: inline-block;
  float: left;
  height: 30px;
  margin: 0;
  padding: 10px 0;
  font-size: 1.5em;
}

ul#main-nav {
  float: right;
  height: 50px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul#main-nav li {
  width: auto;
  height: 30px;
  padding: 10px 0.5em;
  display: inline;
}

ul#main-nav li a {
  display: block;
  line-height: 30px;
  vertical-align: middle;
  font-size: 1.3em;
}

Also if you have any advice regarding my HTML semantics and CSS, I'd gladly take it.

Upvotes: 0

Views: 54

Answers (3)

ncmathsadist
ncmathsadist

Reputation: 4891

I used this

margin-left: -2em;

and it tamed the problem.

Upvotes: 0

user4765675
user4765675

Reputation:

Change your CSS to:

ul#main-nav li {
  width: auto;
  height: 30px;
  padding: 10px 0.5em;
  display: inline-block;
}

Since you defined h1 as an display: inline-block and the li to display: inline you get that vertical result. Simply change it to display: inline-block. Note: This will keep your list in the order your specified.

Upvotes: 2

potashin
potashin

Reputation: 44581

Try to float li elements (with float you don't need to use display: inline), not the whole ul.

ul#main-nav li {
   width: auto;
   height: 30px;
   padding: 10px 0.5em;
   float: right;
}

CodeOpen

Upvotes: 1

Related Questions