Heim  >  Artikel  >  Web-Frontend  >  Wie mache ich Listenelemente in der Navigationsleiste vollständig anklickbar?

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

DDD
DDDOriginal
2024-10-30 07:10:03719Durchsuche

How to Make Navigation Bar List Items Fully Clickable?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn