Erstellen einer vertikalen Kopfzeile horizontal

-2

Ich versuche, das folgende horizontal entlang der Seite statt vertikal zu machen. Ich würde dies gerne tun, da es sich um einen Header am oberen Rand der Seite handeln soll. Vielen Dank.Erstellen einer vertikalen Kopfzeile horizontal

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #f1f1f1; 
 
} 
 
     
 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 
     
 
/* Change the link color on hover */ 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

Quelle

2016-11-14 Giacomo Lawrance

Sie haben noch kein '

' gestartet, aber Sie haben ein End-Tag! –

Es gibt keine ''! –

Downvote für Fehlercodierung. Kein schließendes Tag wie –

Probleme mit Ihnen Code:

Das <header> Element falsch ist, sollte <head> sein.
Es gibt kein <html> Tag.
Die </header> ist verwaist.
Es gibt keine Ende-Tags für </body> und </head>.

tun Sie einfach die zwei Dinge:

Entfernen Sie die width für die <ul>.
Fügen Sie display: inline-block für die <li> hinzu.

Code:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     background-color: #f1f1f1; 
     } 

     ul li { 
     display: inline-block; 
     } 

     li a { 
     display: block; 
     color: #000; 
     padding: 8px 16px; 
     text-decoration: none; 
     } 

     /* Change the link color on hover */ 
     li a:hover { 
     background-color: #555; 
     color: white; 
     } 
    </style> 
    </head> 
    <body> 

    <ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 
    </ul> 
    </body> 
</html>

Quelle

2016-11-14 14:19:51

Super, danke! Hinzugefügt, scheint gut zu funktionieren. Danke für die tolle Hilfe! –

Versuch unter CSS-Eigenschaft für li

float: left;

Quelle

2016-11-14 14:18:46

Ihr Code hat mehrere Fehler: Blick auf diese:

<!DOCTYPE html> 
    <html> 

    <head> 
     <style> 
      ul { 
       list-style-type: none; 
       margin: 0; 
       padding: 0; 
    /*   width: 200px;*/ 
       background-color: #f1f1f1; 
      } 
      li {display: inline-block} 
      li a { 
       display: block; 
       color: #000; 
       padding: 8px 16px; 
       text-decoration: none; 
      } 
      /* Change the link color on hover */ 

      li a:hover { 
       background-color: #555; 
       color: white; 
      } 
     </style> 
    </head> 

    <body> 

     <ul> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#news">News</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li><a href="#about">About</a></li> 
     </ul> 
    </body> 

    </html>

Quelle

2016-11-14 14:20:05 DaFois

hinzufügen mit display:inline-block seine Shows als horizontale und width wird automatisch seine Show als Log. wenn Sie nicht die Änderungsbreite in px` brauchen

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width:auto; 
 
    background-color: #f1f1f1; 
 
    
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 

 
} 
 
li{display:inline-block;} 
 

 
/* Change the link color on hover */ 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

Quelle

2016-11-14 14:21:16 prasanth

Sie müssen setzen "display: inline-block" für den li.

<style> 
ul li{ 
    display:inline-block; 
    width: 20%; /* put width as per your requirement*/ 
} 
</style>

Quelle

2016-11-14 14:22:33 Taniya

Erstellen einer vertikalen Kopfzeile horizontal

Antwort

Verwandte Themen