web-dev-qa-db-fra.com

Comment rendre toute la zone d'un élément de liste dans ma barre de navigation, cliquable sous forme de lien?

J'ai une barre de navigation horizontale créée à partir d'une liste non ordonnée, et chaque élément de la liste comporte beaucoup de rembourrage pour lui donner un aspect agréable, mais le seul domaine qui fonctionne comme un lien est le texte lui-même. Comment puis-je permettre à l'utilisateur de cliquer n'importe où dans l'élément de liste pour activer le lien?

#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>
htmlcssanchor
87
Curyous

Ne mettez pas de rembourrage dans l'élément 'li'. Définissez plutôt la balise d'ancrage sur display:inline-block; et appliquez un rembourrage.

103
Stussa

Définissez votre propriété css de balise d'ancrage comme suit:

{display:block}

Ensuite, l’ancre occupera toute la zone de liste, votre clic fonctionnera donc dans l’espace vide à côté de votre liste.

43
suren

Faites en sorte que la balise anchor contienne le rembourrage plutôt que le li. De cette façon, il occupera toute la zone.

12
Aaron Harun

Utilisez ce qui suit:

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

Super, super tard pour cette soirée, mais de toute façon: vous pouvez aussi définir l’ancre comme un élément flexible. Ceci est particulièrement utile pour les éléments de liste dimensionnés/arrangés de manière dynamique.

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

(Mise en garde: les boites flexibles ne sont toujours pas gérées. Les préfixes automatiques à la rescousse!)

7
crisis.sheep

Ou vous pouvez utiliser jQuery:

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

Vous devriez utiliser cette propriété CSS et cette valeur dans votre li:

pointer-events:all;

Ainsi, vous pouvez gérer le lien avec jQuery ou JavaScript, ou utiliser une balise a, mais tous les autres éléments de balises à l'intérieur de li devraient avoir la propriété CSS:

pointer-events:none;
1
dnvtrn

Il suffit simplement d'appliquer le css ci-dessous:

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

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