Wie mache ich ganze Listenelemente in einer Navigationsleiste anklickbar?

Anklickbare Navigationselemente im gesamten Listenbereich aktivieren

Beim Entwerfen einer Navigationsleiste kann es vorkommen, dass Sie den gesamten Bereich einer Navigationsleiste möchten Listenelement soll als anklickbarer Link fungieren, trotz ausreichender Polsterung für ein ästhetisches Erscheinungsbild. In dieser Anleitung wird erläutert, wie Sie dieses Verhalten erreichen.

Ansatz

Um anklickbare Listenelemente in Ihrer Navigationsleiste zu aktivieren, führen Sie die folgenden Schritte aus:

1. Auffüllung aus Listenelementen entfernen:

   • Fügen Sie keine Auffüllung zum Element „li“ hinzu. Durch das Auffüllen von Listenelementen werden anklickbare Bereiche nur auf den Text beschränkt.

2. Anker-Tags verbessern:

   • Ändern Sie die Anker-Tags (-Elemente), um den Inline-Block anzuzeigen:

     #nav a {
       display: inline-block;
       padding: ...;
     }

   • Wenden Sie Auffüllungen auf die Anker-Tags anstelle der „li“-Elemente an, um anklickbare Bereiche zu steuern.

Verwendung

Im bereitgestellten Beispiel ermöglichen die folgenden Änderungen die Anklickbarkeit in allen Listenelementbereichen:

#nav li {
  padding: 0;
}

#nav a {
  display: inline-block;
  padding: 25px 10px;
}

Beispielcode

<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;
  padding:0;
}

#nav li {
  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>

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

Das obige ist der detaillierte Inhalt vonWie mache ich ganze Listenelemente in einer Navigationsleiste anklickbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!