Wie können Anker-Tags die gesamte Breite von Listenelementen abdecken?

Anker-Tags in voller Breite in Listenelementen

Einführung

Beim Entwerfen von Navigationsmenüs werden häufig Anker-Tags benötigt () um sich über die gesamte Breite der Listenelemente zu erstrecken (

). Das Festlegen des width-Attributs auf -Tags hat jedoch normalerweise keine Auswirkung.

Lösung

Um diesen Dehnungseffekt zu erzielen, müssen wir die Anzeigeeigenschaft des Ankertags ändern. Bei Inline-Elementen wie kann die Breite nicht festgelegt werden. Stattdessen müssen wir sie in Block- oder Inline-Block-Elemente umwandeln:

<code class="css">a.wide {
    display: block;
}</code>

Verwendung

Sobald die CSS-Regel definiert ist, fügen Sie die „wide“-Klasse zu den Anker-Tags innerhalb hinzu

Elemente:

<code class="html"><ul id="menu">
  <li><a class="wide" href="javascript:;">Home</a></li>
  <li><a class="wide" href="javascript:;">Test</a></li>
</ul></code>

Hinweise

• In Internet Explorer 6 ist es möglicherweise möglich, die Breite von Inline-Elementen festzulegen, dies liegt jedoch an einer falschen CSS-Implementierung.

Das obige ist der detaillierte Inhalt vonWie können Anker-Tags die gesamte Breite von Listenelementen abdecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!