Warum ist 100% mehr als 100%?

Yamram

Hallo,

ich bin gerade auf ein Problem gestoßen :shock:

Es handelt sich um Unordered Lists, mit denen ich in letzter Zeit irgendwie Schwierigkeiten bekomme. Ich weiß nicht, warum

Guckt euch den Code an und denkt nach, was da raus kommen würde:

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>
			TEST
		</title>
		<style type="text/css">
			body {
				background: #171717;
				color: #ffffff;
			}
			ul {
				width: 25%;
				border: 1px solid #aaaaaa;
				padding: 0px;
				border-radius: 5px;
				background: #1f7fbb;
			}
			ul li {
				list-style: none;
				padding: 16px;
				margin-left: 0px;
				width: 100%;
				border-bottom: 1px solid #bbbbbb;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>Eins</li>
			<li>Zwei</li>
			<li>Drei</li>
			<li>Vier</li>
			<li>Fünf</li>
		</ul>
	</body>
</html>

Alles anzeigen

Ich finde es komisch, dass das rauskommt:

[attachment=0]Unbenannt.PNG[/attachment]

Warum geht der Rahmen (unten bei jedem li-Element) über die angebene Breite von 100%????? Das Elternelement ist doch ul und deswegen sollten doch eigentlich 25% von BODY gleich 100% von UL sein.

Mit freundlichen Grüßen,
Philipp E.

unkown-6363

Keine ahnung, sorry

Mache ul zu display: inline-block;

und li gibst du die breite die du für das ganze willst..

HTML

<!DOCTYPE html>
    <html>
       <head>
          <title>
             TEST
          </title>
          <style type="text/css">
             body {
                background: #171717;
                color: #ffffff;
             }
             ul {
                display: inline-block;
                border: 1px solid #aaaaaa;
                padding: 0px;
                border-radius: 5px;
                background: #1f7fbb;
             }
             ul li {
                list-style: none;
                padding: 16px;
                margin-left: 0px;
                width: 200px;
                border-bottom: 1px solid #bbbbbb;
             }
          </style>
       </head>
       <body>
          <ul>
             <li>Eins</li>
             <li>Zwei</li>
             <li>Drei</li>
             <li>Vier</li>
             <li>Fünf</li>
          </ul>
       </body>
    </html>

Alles anzeigen

*EDIT*
PS: das war ja mal eine schnelle antwort. 3min xD

Basi

Spar dir einfach width: 100%; und die Sache hat sich erledigt.

Das Element ist übrigens zu lang weil es nicht 100% groß ist, sondern 100% + 2 x padding:16px ;

Yamram

@drPHIP132: Hey, also bei Facebook habe ich Mist erzählt. Ich finde deine Lösung klasse Das würde dann je nach Breite gut aussehen.

@Basiii: Deine Lösung funktioniert ebenfalls. Ich finde sie auch besser, weil man da die Breite beim ul angibt und nicht wie bei drPHIP132's Lösung bei den lis

[attachment=0]Unbenannt.PNG[/attachment]

Jetzt mitmachen!