HTML CSS - 导航栏最右侧的“注销”按钮

时间:2015-10-13 08:02:22

标签: html css responsive-design uinavigationbar navigationbar

我所做的是我多次放置,但是当您更改窗口大小时,退出按钮不会停留。如何使退出按钮停留在最右边的部分除了使用& nbsp代码之外还有导航栏?感谢

enter image description here

1 个答案:

答案 0 :(得分:2)

试试这个

<!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>