Wie erweitere ich den anklickbaren Bereich von Listenelementen in Navigationsleisten?

Erweitern des anklickbaren Bereichs von Listenelementen in Navigationsleisten

Navigationsleisten enthalten häufig ungeordnete Listen mit aufgefüllten Listenelementen. Allerdings ist der anklickbare Bereich zur Linkaktivierung typischerweise auf den Text selbst beschränkt. Um die Benutzererfahrung zu verbessern, können Sie das gesamte Listenelement anklickbar machen.

Lösung:

Vermeiden Sie das Hinzufügen von Auffüllungen zum

Element. Wenden Sie stattdessen das folgende CSS auf das an. Tag innerhalb jedes Listenelements:

a {
  display: inline-block;
  padding: [desired padding values];
}

Dadurch wird sichergestellt, dass sich der anklickbare Bereich auf das gesamte Listenelement ausdehnt, während die gewünschte Auffüllung und das gewünschte Layout beibehalten werden.

Beispiel:

Berücksichtigen Sie das gegebene HTML und CSS:

<code class="html"><div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div></code>

<code class="css">#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  float: left;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  display: inline-block;
  padding: 25px 10px;
}</code>

Durch Anwenden der Anzeige: inline-block; und Fülleigenschaften für die Ankertags erweitert sich der anklickbare Bereich jedes Listenelements über die gesamte Breite des Elements, ohne das ursprüngliche Layout zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie erweitere ich den anklickbaren Bereich von Listenelementen in Navigationsleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!