it-swarm.com.de

<a> -Tag ausdehnen, um den gesamten <li> auszufüllen

Hier ist eine einfache Menüstruktur:

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

Ich möchte, dass der <a> so gedehnt wird, dass er den gesamten <li> ausfüllt. Ich habe versucht, etwas wie width: 100%; height: 100% zu verwenden, aber das hatte keine Auswirkungen. Wie dehne ich das Ankertag richtig?

56
Pieter

Das "a" -Tag ist ein Inline-Element. Für kein Inline-Ebenenelement darf die Breite festgelegt werden. Warum? Denn Inline-Level-Elemente sollen fließenden Text darstellen, der theoretisch von einer Zeile zur nächsten umgebrochen werden könnte. In solchen Fällen ist es nicht sinnvoll, die Breite des Elements anzugeben, da Sie nicht unbedingt wissen, ob es umgebrochen wird oder nicht. Um die Breite festzulegen, müssen Sie die Anzeigeeigenschaft in block oder inline-block ändern:

a.wide {
    display:block;
}

...

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

Wenn der Speicher belegt ist, können Sie können die Breite für bestimmte Elemente auf Inline-Ebene in IE6 festlegen. Das liegt aber daran, dass der IE6 CSS falsch implementiert und Sie verwirren möchte.

114
Dave Markle

Benutze das A einfach mit einem display:block;:

ul#menu li a { display: block;}
13
bluesmoon
display:flex

ist der HTML5-Weg. 

Siehe Fiddle

Nützlich, um Rahmen-Schaltflächen oder andere Elemente zu hacken. Möglicherweise müssen Sie jedoch zuerst die Auffüllung entfernen und sie auf die gewünschte Höhe einstellen.

In diesem Fall sind eckige Material-Registerkarten, die ziemlich kompliziert sind, um sie als "Standard" -Website-Navigation zu verwenden.

Beachten Sie, dass sich der Zeiger ändert, sobald Sie die Registerkarte öffnen: Die <a> werden jetzt gestreckt, um sie an ihre übergeordneten Dimensionen anzupassen. 

Außerhalb des Themas ist zu beachten, wie fehlerfreies Winkelmaterial den Welleneffekt auch auf einer "großen Oberfläche" zeigt.

.md-header{
/* THIS IS A CUSTOM HEIGHT */
    height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

md-tab{    
    padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

a{
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 100%; 
}

UPDATE 2018

AngularJS Material gibt eine (sanfte) Warnung aus, wenn Sie Schaltflächenelemente verwenden. Nehmen Sie daher nicht an, dass alle HTML-Elemente/Tags mit display:flex richtig umgehen können oder ein homogenes Verhalten in allen Browsern haben.

Denken Sie daran, flexbugs bei unerwartetem Verhalten in einem bestimmten Browser zu konsultieren.

8

Ich habe diesen Code verwendet, um die Breite und Höhe 100% auszufüllen.

HTML

<ul>
    <li>
        <a>I need to fill 100% width and height!</a>
    </li>
<ul>

CSS

li a {
   display: block;
   height: 100%; /* Missing from other answers */
}
1
Michael

Ein anderer Versuch: 

<ul>
    <li>
        <a></a>
        <img>
        <morestuff>TEXTEXTEXT</morestuff>
    </li>
</ul> 

a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: [higher than anything else inside parent]
    width:100%;
    height: 100%;
}  

Dies ist hilfreich, wenn der Container der Verknüpfung auch Bilder enthält und solche enthält oder je nach Größe des Bildes/Inhalts möglicherweise unterschiedliche Größen aufweist. Damit kann das Ankertag selbst leer sein und Sie können andere Elemente innerhalb des Ankers Container anordnen, wie Sie möchten. Der Anker entspricht immer der Größe des übergeordneten Elements und ist oben, um die gesamte li anklickbar zu machen.

1
Aidan Miles

Das Ändern der Anzeigeeigenschaft auf Block funktionierte für mich nicht. Ich entfernte die Auffüllung von li und stellte dieselbe Auffüllung für a ein.

  li a {
        display:block;  
        padding: 4px 8px;  

  }
1
Pranav B

Verwenden Sie line-height und text-indent anstelle der Auffüllung für li -Element und verwenden Sie display: block; für Anker-Tag

0
niyas
<!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
    display:block;
}
</style> 
</head>
<body>
    <ul id="menu">
      <li><a href="javascript:;">Home</a></li>
      <li><a href="javascript:;">Test</a></li>
    </ul>
</body>
</html>

Sie sollten versuchen, die Verwendung einer Klasse für jedes Tag zu vermeiden, damit der Inhalt einfach zu pflegen ist.

0
Jake

Ich wollte diese Funktionalität nur in der Tab-Ansicht, dh unterhalb von 720px. Daher habe ich bei der Medienabfrage Folgendes ausgeführt:

@media(max-width:720px){
  a{
    display:block;
    width:100%;
  }
}
0
Michael Philips