Page Widget How to - Align navigation links to right

Question

We would like to know how to align navigation links to right.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
nav {<!--from  ww  w. j a  v a  2 s .  c o  m-->
  float: right;
  margin-right: 40px;
  margin-top: 40px;
}

nav ul li {
  border-left: 1px solid #202020;
  display: inline;
}

nav ul li a {
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 10px;
}

nav ul li:first-child {
  border: 0;
}
</style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

The code above is rendered as follows: