Question

我无法了解如何将最后<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列表项相关联的样式，因此由于此规则，它将被左浮动

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

所以，只需添加

#right {
    float: right 
}

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

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

Answer 2

您的代码中没有错误。可能有一些CSS与您的代码冲突。正确检查你的css。

Answer 3

工作正常

CSS

#last{
    float: right;
   }

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 id="last"><a href="">LastItem</a></li>
  </ul>
</nav>

试试这个

在<nav> </nav> </li>内向右移动<li>

3 个答案: