HTML CSS - 导航栏最右侧的注销按钮答案

【问题标题】：HTML CSS - Logout button at rightmost part of navigation barHTML CSS - 导航栏最右侧的注销按钮
【发布时间】：2015-10-13 08:02:22
【问题描述】：

我所做的是我放置了很多次&nbsp但是当你改变窗口的大小时，注销按钮并没有留在原地。你如何让注销按钮留在导航栏的最右边除了使用 &nbsp 代码？谢谢

【问题讨论】：

你只是不使用&nbsp;。使用margin 或float。删除“ ”。这很糟糕
能否在问题中包含 html 和 css？
无论窗口大小如何，使用 &nbsp 总是会添加一个空格。如果您希望注销按钮保持在右侧，您可以使用 float: right 或 margin 来保持位置，无论窗口大小如何。

标签： html css responsive-design uinavigationbar navigationbar

【解决方案1】：

试试这个

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.horizontal ul {
         list-style-type: none;
         margin: 0px;
         padding: 0px;
         }
         div.horizontal {
         width: 100%;
         height: 30px;
         background-color: #98BF21;
         }
         div.horizontal li {
         float: left;
         }
         div.horizontal a:link, div.horizontal a:visited {
         font-weight: bold;
         color: #FFF;
         background-color: #98BF21;
         text-align: center;
         padding: 4px;
         text-decoration: none;
         text-transform: uppercase;
         }
         div.horizontal a {
         display: block;
         width: 100px;
         }
         li.last
         {
         float:right !important;
         }
      </style>
   </head>
   <body>
      <div class="horizontal">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
            <li class="last"><a href="#">Logout</a></li>
         </ul>
      </div>
   </body>
</html>

【讨论】：

没有正当理由在最后一个 li 元素上添加最后一个类。 CSS 有一个伪类可以做到这一点，最后你应该使用 :last-child，所以：ul li:last-child