我正在尝试创建导航菜单，其中最后一个元素位于右侧。当我使用
float: right
该元素略低于导航菜单的其他元素。为什么这样，我该如何解决？
这是我的css：
nav ul{
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
padding: 5px 1em;
}
nav ul li:last-child{
float: right;
}
链接到JSFiddle：https://jsfiddle.net/sLqnm8r5/