UL/LI CSS-Code zeigt das obere Menü nicht korrekt an

Question

Ich habe einen Fehler beim Abrufen meines Top-Menüs, jetzt wo ich versucht habe, ul- und li-Tags anstelle von divs zu verwenden. Ich habe eine UL mit sechs Li-Tags drin. Ich möchte, dass jedes li-Tag ein Bild enthält, das die gleichen Abmessungen wie jedes andere Bild haben sollte. Jedes li-Tag-Bild sollte horizontal nur 1/6 der Seite einnehmen. Vertikal sollten sie ungefähr 100 px sein. Ich kann die Bilder derzeit nicht richtig anzeigen. Obwohl ich das gleiche Testbild verwende, werden alle separaten Tags unterschiedlich dargestellt.

Hier ist meine CSS, HTML, und die Bilder in einem Imgur Link verwendet:

HTML: http://pastebin.com/raw/EbyXvXEg

CSS: http://pastebin.com/raw/P8nkGHxN

Imgur: https://imgur.com/a/WF6Dd

ich das nicht bekommen kann Menü, um zu arbeiten, wie ich will. Die mittleren Menüpunkte zeigen immer ein größeres oder kleineres Bild an. Ich kann das nicht zur Arbeit bringen. Könnte mir jemand helfen, mich wenigstens in Richtung Hilfe zu weisen? Ich bin mir nicht sicher, wie ich Bildern helfen kann, in einem Film zu arbeiten, sonst würde ich das posten.

Answer 1

versuchen Sie, jour Bilder als Hintergrund der a-Tags hinzuzufügen. Verwenden Sie auch Ihr Styling zu einem Tags.

a { 
    width: 16.66%; 
    height: 100px; 
    display: block; 
    background: url(your image URL); 
    background-position: center; 
    background-size: cover; 
    background-repeat: none; 
} 

hintergrundgröße: cover; dehnt das Bild aus, bis es Ihre Inhaltsbox füllt. Sie können auch Bilder mit verschiedenen Größen verwenden.