Meine Top-Bar füllt sich nicht komplett

Meine Top-Bar auf meiner Website ändert nicht die Farbe komplett ... es gibt einen Splitter an der Unterseite. Weiß jemand warum? Meine website und die error. Mein Code:Meine Top-Bar füllt sich nicht komplett

HTML

<header> 
    <ul> 
    <li> <a href="/">Home</a></li> 
    <li> <a href="https://github.com/reteps" >Github</a></li> 
    <li> <a href="gradecalc/gradecalc.html" >Grade Calculator</a></li> 
    </ul> 
</header>

CSS

header ul { /*selects list of stuff*/ 
    list-style-type: none; /*no bullet points*/ 
    margin: 0; 
    padding: 0; 
    background-color: #70deef; 
    position: fixed; 
    width: 100%; 
    height: 50px; 
} 
header li { /*selects list element*/ 
    float: left; /*move to left*/ 
} 
header li a { 
    display: block; /*makes a square*/ 
    color: #ffffff; /*white*/ 
    text-align: center; 
    text-decoration: none; 
    padding: 20px 20px 10px; 
} 
header li a:hover { 
    background-color: #d6d6d6; /*grey*/ 

}

Quelle

2017-02-13 lol

Ihres 'ul' hat eine Höhe von 50. Das Kind' li' ist nur so groß wie der Text und die Polsterung ist. Entfernen Sie die Höhe "ul". –

Soll ich die Höhe in das li-Tag setzen? – lol

Entfernen Sie einfach die Höhe aus der Klasse "ul". Lassen Sie die Füllhöhe und Texthöhe die Höhe des Headers steuern. –

Remove Höhe auf ul Tag. Ihre Blockhöhe wird bereits durch den Inhalt font-size und padding (plus Rand/Grenze, falls vorhanden) bestimmt

Quelle

2017-02-13 01:50:54 Rikin

In Bezug auf Ihre vorgeschlagene Bearbeitung in einem anderen Beitrag, konvertieren Sie den Code bitte nicht in ein nicht funktionierendes Snippet. http://stackoverflow.com/review/suggested-edits/15188993 –

Im Falle von UL-Tag, nie für Höhe Attribut gehen. Da es unnötige Lücken verursachen kann.

ul { 
    padding: 0; 
    margin: 0; 
    overflow: auto; 
}

Dies ist das Minimum, aber ausreichend Styling für ul-Tag

Quelle

2017-02-13 03:45:04

Meine Top-Bar füllt sich nicht komplett

Antwort

Verwandte Themen