Wie verhindert man, dass Elemente Dimensionen von übergeordneten Elementen erben? Beispiel HTMLWie geerbte Dimensionen überschreiben?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Problem</title>
<style type="text/css">
.main li a {
height: 80px;
width: 150px;
background: #ff00ff;
margin-bottom: 1px;
display: block;
}
.sub li a {
display: block;
background: #00ff00;
}
</style>
</head>
<body>
<div>
<ul class="main">
<li>
<a>Item 1</a>
<ul class="sub">
<li><a>Subitem 1 - this should not inherit height of 80px</a></li>
<li><a>Subitem 2 - this should not inherit height of 80px</a></li>
</ul>
</li>
<li><a>Item 2</a></li>
</ul>
</div>
</body>
</html>
Die .sub li a erbt die Breite und Höhe von .main li a und ich weiß nicht, warum. Ich muss die Breite und Höhe für das äußere li einstellen, aber das innere li sollte Breite und Höhe wie benötigt haben. Ich kann geerbtes Float zum Beispiel mit float löschen: none, aber ich weiß nicht, wie ich die angegebenen Dimensionen zurücksetzen soll, damit sie nicht auf die Subelemente zutreffen.
Ich habe ein kleines Beispiel gemacht, damit Sie sehen können, was das Problem ist. Ich habe die Höhe für .main li a definiert, aber ich verstehe nicht, warum .sub li a nichts davon erbt! –
@ A-OK ah, das ist anders. Nun, es ist nicht wirklich * erben * die Höhe, aber die CSS-Regel gilt für das Element direkt. Probieren Sie "height: auto" im Sub-li oder '.main> li> a' in der ersten Regel, aber das wird in IE6 zerbrechen. –
Aber warum sollte die CSS-Regel gelten? Es ist für .main li a und das Unterelement ist .main li .sub li a –