Widersprüchliches Problem mit CSS

Question

Ich wurde letzte Nacht gesagt, dass das Folgende in CSS nicht erlaubt ist.

<a href="index.php"><div class="button">Home</div></a> 

.submenu div.button{width:72px; height:20px; float:left; margin:0 20px; font-size:0.9em; font-family:Arial; padding:2px; color:black;} 

Wie kann ich das gewünschte Aussehen für die Schaltfläche erstellen und es dem Benutzer dann ermöglichen, auf eine andere Weise darauf zu klicken? Was ist der beste Weg, dies zu tun?

Es funktioniert so wie es ist, aber mir wird gesagt, dass es nicht kompatibel ist.

Answer 1

Das CSS ist absolut gültig, was nicht erlaubt ist, Elemente auf Blockebene innerhalb von Inline-Elementen zu verschachteln. Also, in Ihrem Fall ist es illegal, eine <div> in eine <a> einzufügen. Sie können die <div> zusammen verlassen und stylen Sie stattdessen das <a> Element und geben Sie display: block für es wie ein Block-Level-Element zu verhalten.

<a href="index.php" class="button">Home</a> 

.submenu a.button{ 
    display: block; 
    width: 72px; 
    height: 20px; 
    float: left; 
    margin: 0 20px; 
    font-size: 0.9em; 
    font-family: Arial; 
    padding: 2px; 
    color: black; 
} 

Answer 2

Sie können eine Spannweite anstelle des div ... Oder Sie können Display verwenden: Block für den einen Tag und Art der ein Tag ...

Answer 3

so etwas wie dieses kann erreichen, was Sie will mit minimalem Aufwand.

<div class="submenu"> 
    <a class="button" href="index.php">Home</a> 
</div> 

.submenu a.button{ 
    width:72px; 
    height:20px; 
    float:left; 
    margin:0 20px; 
    font-size:0.9em; 
    font-family:Arial; 
    padding:2px; 
    color:black; 

    display:block; /*added */ 
} 

Der Anker wird überqualifiziert werden, .submenu a {} würde nur ausreichen, aber das hängt, wenn Sie möchten in der .submenu div andere, un-Stil Links haben.

bearbeiten auch - kann nicht wirklich von Ihrem bereitgestellten Markup erzählen, aber Sie werden wahrscheinlich eine ungeordnete Liste für "semantische" Markup verwenden möchten. meins ist nur ein Beispiel