html - 将最后一个 float 到 内的右侧

Question

我不知道如何 float 最后一个 <li>在<nav>的右边,

我的 html 代码是:

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Item1</a></li>
    <li><a href="">Item2</a></li>
    <li><a href="">Item3</a></li>
    <li><a href="">LastItem</a></li>
  </ul>
</nav>

当我使用 <li style="float:right"><a href="">LastItem</a></li> 时显示良好。

但是当使用 id 时:

<li id="last"><a href="">LastItem</a></li>

和

#last {
  float: right;
}

显示不正确。

我怎样才能让它工作？

Answer 1

在 your website 的样式表中您没有与 #right 关联的样式列表项，因此它将根据此规则保持 float

nav ul li {
    float: left;
    line-height: 50px;
}

所以，只需添加

#right {
    float: right 
}

或者您也可以使用 :last-child伪元素(在现代浏览器上，而不是在 IE<9 上)并保存一个 id标记上的属性

nav ul li:last-child {
    float: right 
}