I'm currently working on creating a horizontal navigation that needs to align to the right side of the page. However, when I float the navigation to the right and then float all the list items to the left, the last item in the list breaks onto a new line.
The issue seems to be resolved if I remove any margin properties. But using margin is essential for me as I have set the anchor tags to display as blocks to ensure the entire area is clickable, especially for touch screen users.
Is there anyone who can assist me in ensuring all the words in my unordered list appear on a single line while floating to the right, and still utilizing both margin and padding?
Please refer to this example on JS Fiddle for further clarification: https://jsfiddle.net/samuelcrockford/4a8oovjs/1/#&togetherjs=P0dq57flOy
To view an example, click on the JS Fiddle link provided above.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
nav {
float:right;
overflow: auto;
}
nav ul {
float:right;
list-style: none;
}
nav ul li {
float: left;
margin-left: 4%;
}
nav ul li:first-child { margin-left: 0;}
nav ul li a {
display: block;
float: left;
font-size: 1em;
padding: 0 2%;
}