CSS list items vergrößern

Physically · 10. Februar 2012

Hey Leute,

ich wollte mal fragen, wie ich die "Box" von einem list item kann, habe es so in CSS mal realisiert, aber es funktioniert nicht:

Code:

#navi li{
	[B]width: 123px;
	height: 52px;[/B]
	list-style-type: none;
	display: inline;
	padding-left: 15px;
	background-image: url(../images/navi_li.gif);
	background-repeat: no-repeat;
	border: 1px solid #dbdbdb;
}

Bei Padding gehen die Items über die Box hinaus, das möchte ich ja auch nicht..

Danke

chriz0101 · 10. Februar 2012

verringere die weite um 15px weil du sie im padding hast

Daaron · 10. Februar 2012

Dein Problem ist das "display:inline". Inline-Elemente reagieren nicht auf width und height. Nimm für solche Zwecke entweder float (und nach dem letzten Element zur Sicherheit noch ein clear) oder, wenn du weißt, dass deine Besucher nicht mit Holzbrowsern kommen, einfach mit display:inline-block.

Physically · 10. Februar 2012

width: 117px brint leider nichts...

Code:

#navi li{
    list-style-type: none;
    display: inline;
    background-image: url(../images/navi_li.gif);
    background-repeat: no-repeat;
    border: 1px solid #dbdbdb;
}

So kleben diese oben im linken Eck des DIVs, aber wie bekomme ich die Boxen den list items größer und die list items dann mittig in der box?

Suche

CSS list items vergrößern

Physically

Lt. Commander

chriz0101

Lt. Junior Grade

Daaron

Fleet Admiral

Physically

Lt. Commander

Ähnliche Themen