使用float：right后，列表的最后一个元素被下推

Question

我正在尝试创建导航菜单，其中最后一个元素位于右侧。当我使用

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/

Answer 1

如果您在第一个元素中添加set，则元素会正确对齐。 结帐Fiddle