Wie mache ich Listenelemente in der Navigationsleiste vollständig anklickbar?

Navigationsleisten-Listenelemente vollständig anklickbar machen

In einer typischen horizontalen Navigationsleiste, die mit einer ungeordneten Liste erstellt wurde, wird dies durch Klicken auf eine beliebige Stelle auf einem Listenelement erreicht lösen die Aktion höchstwahrscheinlich nur dann aus, wenn sich der Cursor im Text des Links selbst befindet. Um den anklickbaren Bereich auf das gesamte Listenelement zu erweitern, ändern Sie HTML und CSS wie folgt:

CSS:

<code class="css">#nav li a {
  display: inline-block;
  padding: 25px 10px;
}</code>

Indem Sie die Polsterung aus dem 'li' entfernen '-Elemente hinzufügen und zu den Ankertags hinzufügen, wird der anklickbare Bereich nun erweitert, um die gesamte Breite und Höhe des Listenelements auszufüllen.

HTML:

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

Jetzt können Benutzer auf eine beliebige Stelle innerhalb der Listenelemente klicken, um die entsprechenden Links zu aktivieren und so eine benutzerfreundlichere Navigationsleiste bereitzustellen.

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