Daniel B Daniel B - 3 years ago 122
CSS Question

Floating navigation anchor points without reversing their order?



.topNav {
overflow: hidden;
background-color: #5e9da1;
}


/* Style the links inside the navigation bar */

.topNav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}


/* Change the color of links on hover */

.topNav a:hover {
background-color: #ddd;
color: #000000;
}


/* Add a color to the active/current link */

.topNav a.active {
background-color: #4CAF50;
color: #ffffff;
}

<div class="topNav">
<a class="active" href="#home">Home</a>
<a href="#About">About</a>
<a href="#Gallery">Gallery</a>
<a href="#Contact">Contact</a>
</div>





How do I float the anchor points to the right without reversing the order among themselves?

Note: I was able to solve this problem by manually reversing the anchor point order in the HTML file, but I'm not sure if this is a proper solution (good practice) to the issue:
Example:

<a href="#Contact">Contact</a>
<a href="#Gallery">Gallery</a>
<a href="#About">About</a>
<a class="active" href="#Home">Home</a>

Answer Source

Generally I'd advise against using using floats for this and other reasons. I used an inline block instead, and aligned the content to the right

.topNav {
  overflow: hidden;
  background-color: #5e9da1;
  text-align: right;
}


.topNav a {  
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

}

Here's a fix in Codepen - https://codepen.io/anon/pen/MEvYYq

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download