Wie mache ich den gesamten Bereich eines Listenelements in meiner Navigationsleiste als Link anklickbar?

Ich habe eine horizontale Navigationsleiste, die aus einer ungeordneten Liste besteht, und jedes Listenelement hat viele Auffüllungen, damit es schön aussieht, aber der einzige Bereich, der als Link fungiert, ist der Text selbst. Wie kann ich dem Benutzer ermöglichen, auf eine beliebige Stelle im Listenelement zu klicken, um den Link zu aktivieren?

#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;
  padding: 25px 10px;
}

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

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

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

Legen Sie keine Polsterung in das Element 'li'. Setzen Sie stattdessen das Ankertag auf display:inline-block;und wenden Sie eine Auffüllung an.

Definieren Sie Ihre CSS-Eigenschaft für das Ankertag wie folgt:

{display:block}

Dann nimmt der Anker den gesamten Listenbereich ein, sodass Ihr Klick in dem leeren Bereich neben Ihrer Liste funktioniert.

Stellen Sie sicher, dass das Ankertag eher die Polsterung als die enthält li. Auf diese Weise nimmt es den gesamten Bereich ein.

Super, super spät zu dieser Party, aber trotzdem: Sie können den Anker auch als Flex-Gegenstand stylen. Dies ist besonders nützlich für Listenelemente mit dynamischer Größe / Anordnung.

a {
  /* This flexbox code stretches the link's clickable 
   * area to fit its parent block. */
  display:        flex;
  flex-grow:      1;
  flex-shrink:    1;
  justify-content: center;
}

(Vorsichtsmaßnahme: Flexboxen werden obvs immer noch nicht gut unterstützt. Autoprefixer zur Rettung!)

Verwenden Sie Folgendes:

a {
  display: list-item;
  list-style-type: none;
}

Oder Sie könnten jQuery verwenden:

$("li").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

Sie sollten diese CSS-Eigenschaft und diesen Wert in Ihrem li:

pointer-events:all;

Sie können den Link also mit jQuery oder JavaScript verarbeiten oder ein aTag verwenden, aber alle anderen Tag-Elemente in lisollten die CSS-Eigenschaft haben:

pointer-events:none;

Wenden Sie einfach das folgende CSS an:

<style>
  #nav ul li {
    display: inline;
  }

  #nav ul li a {
    background: #fff;// custom background
    padding: 5px 10px;
  }
</style>

Hier ist, wie ich es gemacht habe

Machen Sie den <a>Inline-Block und entfernen Sie die Polsterung von Ihrem<li>

Dann können Sie mit dem widthund dem heightder <a>in der spielen<li>

Setzen Sie das widthauf 100%und sehen Sie, wie es funktioniert

PS: - Holen Sie sich die Hilfe der Chrome Developer Tools, wenn Sie das heightund ändernwidth

Sie können jederzeit das gesamte Tag li mit dem Hiperlink-Tag einwickeln. Hier ist meine Lösung:

#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;
  text-align: center;
  float: left;
  width: 40px;
  padding: 25px 10px;
}

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

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

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

Fügen Sie das Listenelement in den Hyperlink ein und nicht umgekehrt.

Zum Beispiel mit Ihrem Code:

<a href="#"><li>One</li></a>