CODEWITHSUNDEEP
htmlcssnavigation
Kevin Brooks
Kevin Brooks

Reputation: 11

Navigation Bar text aligning backwards (CSS)

I'm in the process of developing my first website and I'm having an issue with the Navigation Bar. I'm using CSS rules to align the bar but unfortunately when I set the rules to float:right; my text is floating right but it’s lining up backwards on the bar. How can I float the text over to the right and align the text correctly?

.nav ul li {
  display: inline-block;
  float: right;
  padding: 10px 10px;
}
.nav {
  background-color: black;
  position: fixed;
  width: 100%;
  top: 0px;
  margin: auto;
  font-weight: bold;
  border-bottom: 2px solid orange;
  margin-top: 5px;
}
.nav ul li a {
  color: orange;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0px 10px;
}
<div class="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">FAQ</a>
    </li>
  </ul>
</div>

Upvotes: 1

Views: 1457

Answers (1)

m4n0
m4n0

Reputation: 32275

You need to float the ul list, not individual list items li.

Setting float: right on li allows the first list item to align to the right first and then the rest of the items take their positions similarly. It caused the direction of the list from right to left.

.nav ul {
  float: right; /* Added */
}
.nav ul li {
  display: inline-block;
  padding: 10px 10px;
  /* float: right; Removed */ 
}
.nav {
  background-color: black;
  position: fixed;
  width: 100%;
  top: 0px;
  margin: auto;
  font-weight: bold;
  border-bottom: 2px solid orange;
  margin-top: 5px;
}
.nav ul li a {
  color: orange;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0px 10px;
}
<div class="nav">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">FAQ</a>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions