2010-11-22 19 views
2

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.

Antwort

3

Ich nehme an, Ihre li s sind display: block Elemente? In diesem Fall übernehmen sie nicht wirklich erben die Breite des übergeordneten Elements, aber sie sind width: 100% standardmäßig.

Ich denke nicht, dass Sie in diesem Fall eine explizite Breite für die innere li setzen werden.

+0

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! –

+0

@ 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. –

+0

Aber warum sollte die CSS-Regel gelten? Es ist für .main li a und das Unterelement ist .main li .sub li a –

1

Das ist keine Vererbung. Der Selektor .main li a gilt gleichermaßen für allea Tags innerhalb der li innerhalb des Elements mit der main Klasse. Was Sie fordern, ist, dass diese Regel nicht gilt. Drei Vorschläge.

Option 1: Ändern Sie die erste CSS-Selektor auf:

.main li > a 

Das bedeutet, "nur Tags, die die unmittelbaren Kinder des li sind". Die Unterstützung für diese Syntax in älteren Browsern ist jedoch nicht groß.

Option 2: Fügen Sie "height: auto;" zur CSS-Regel .sub. Auch dies funktioniert auf neueren Browsern, aber ältere Browser implementieren es nicht unbedingt ordnungsgemäß.

Option 3: eine Klasse zum ersten a-Tag hinzufügen und ändern Sie den ersten CSS-Selektor auf

.main li a.yourClass

Dies verhindert, dass die Höhe und die andere auf all a Tags Anwendung von Regeln, die nicht über die Klasse. Dies funktioniert gut in allen Browsern, sogar in schrecklichen alten.