CSS Hintergrund Text füllt die Box

Ich versuche, eine Kopie einer Website als meine erste CSS/HTML-Übung zu machen. Ich kann nicht herausfinden, wie man die Menüliste erstellt, so dass ihr Hintergrund die Box füllt (bis zum rechten Rand).CSS Hintergrund Text füllt die Box

Picture von dem, was ich jetzt habe (rechte Seite des Bildes, rote Linien zeigen, wo der Hintergrund gehen sollte) und was ich bekommen möchte (linke Seite).

Meine code.

Ich habe es bisher versucht, es z.B. mit "Breite" und "Anzeige" Parametern, aber z.B. display: block; entfernen Sie die Zeilen zwischen Text. Ich habe keine Ideen mehr.

Quelle

2016-05-27 oboer

ID = "Menü" eine ID nur einmal in einem HTML verwenden. Sie können zu class = "menu" wechseln. –

 display: block; 
     width: 100%; 
     margin-bottom: 2px;

zum #menu

Quelle

2016-05-27 09:19:20 Jirka

Danke, 'margin-bottom' scheint der Schlüssel zu meinem Problem zu sein. – oboer

@oboer Nein. Das Problem ist, dass Spannen Inline-Elemente sind. Achten Sie auch auf die ID und die Klasse (wie ich in meiner Antwort erwähnt habe). –

spans sind Inline-Elemente, so dass sie nicht width oder height haben. Sie sollten einen background-color zu Ihren li Elementen anstelle Ihres spans setzen.

.menu{ 
    background-color: grey; //Change it to your custom colour. 
}

Auch Sie können nicht mit der gleichen ID mehr als ein Element haben. Sie müssen sie als eine Klasse setzen.

Updated JSFiddle.

Quelle

2016-05-27 09:19:48

Danke für Tipps über "ID" und "Spannen", ich werde sie in meinem Kopf tragen. Gewählt, aber meine Stimme wird angezeigt, wenn ich 15 Wiederholungen erreiche. – oboer

@oboer Sie müssen wissen, wie jedes Element auf der Webseite angezeigt wird. Zum Beispiel, wenn Sie eine "span" wie einen "Block" anzeigen, wirkt es wie ein "Block", so dass es Höhe/Breite hat. Da ein Bereich standardmäßig ein Inline-Element ist, deckt er nicht die gesamte Breite der Elemente ab. Und seien Sie vorsichtig mit IDs und Klasse. Es ist sehr wichtig, ID nur in ** eindeutigen ** Elementen zu verwenden. Prost! :) –

CSS Hintergrund Text füllt die Box

Antwort

Verwandte Themen