CODEWITHSUNDEEP
htmlcss
matip
matip

Reputation: 900

Last element of a list being pushed down after using float: right

I'm trying to create navigation menu in which last element is on the right side. When I use

float: right

That element is slightly lower that other elements of the navigation menu. Why is that and how can I fix it?

Here is my css:

nav ul{
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
padding: 5px 1em;
}
nav ul li:last-child{
float: right;
}

And link to JSFiddle: https://jsfiddle.net/sLqnm8r5/

Upvotes: 0

Views: 385

Answers (1)

Frank W.
Frank W.

Reputation: 787

Your elements would align correctly if you added a float:left; to your first elements. checkout Fiddle

Upvotes: 1

Related Questions