HTML-CSS - Logout-button im rechten Teil der Navigationsleiste

Was ich getan habe, ist ich gelegt &nbsp eine Menge Zeit, aber wenn Sie ändern die Größe des Fensters, den logout-button nicht bleiben.Wie machen Sie den logout-button bleiben Sie im rechten Teil der Navigationsleiste neben der Verwendung der &nbsp-code? Dank

HTML-CSS - Logout-button im rechten Teil der Navigationsleiste

  • Sie einfach nicht mit  . Verwenden margin oder float. Entfernen Sie die ' '. Es ist schlecht
  • können Sie Ihre html-und css-Code in deine Frage?
  • Mit &nbsp werde immer ein leerer Raum, unabhängig von der Größe des Fensters. Wenn Sie möchten, dass der logout-button zu bleiben, in der rechten können Sie verwenden float: right oder marrgin, um die position halten, unabhängig von der Größe des Fensters.
InformationsquelleAutor user3360708 | 2015-10-13
  1. 2

    Versuchen, Diese 

    <!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>
    • Es gibt keinen Grund, um die Klasse hinzuzufügen zuletzt auf dem letzten li-element. CSS pseudo-Klasse, genau das zu tun, statt die letzten, die Sie verwenden sollten :last-child, also: ul li:last-child
    InformationsquelleAutor Pratik Jagtap
Schreibe einen Kommentar