Pregunta ¿Cómo puedo hacer que toda el área de un elemento de la lista aparezca en mi barra de navegación, haciendo clic como un enlace?


Tengo una barra de navegación horizontal hecha a partir de una lista desordenada, y cada elemento de la lista tiene una gran cantidad de relleno para que se vea bien, pero la única área que funciona como un enlace es el texto en sí. ¿Cómo puedo permitir que el usuario haga clic en cualquier parte de la lista para activar el enlace?

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


74
2018-06-19 05:22


origen


Respuestas:


No coloque relleno en el elemento 'li'. En su lugar, establezca la etiqueta de anclaje en display:inline-block; y aplicar relleno a ella.


90
2018-06-19 05:24



Defina su propiedad anclaje css como:

{display:block}

Luego, el delimitador ocupará toda el área de la lista, por lo que su clic funcionará en el espacio vacío al lado de su lista.


39
2017-07-28 04:08



Haga que la etiqueta de anclaje contenga el relleno en lugar de la li. De esta manera, ocupará toda el área.


12
2018-06-19 05:36



Súper, súper tarde para esta fiesta, pero de todos modos: también puedes diseñar el anclaje como un elemento flexible. Esto es particularmente útil para elementos de la lista dinámicamente dimensionados / arreglados.

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

(Advertencia: los flexboxes todavía no están bien soportados. ¡Autoprefixer al rescate!)


5
2018-06-13 12:13



Use lo siguiente:

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

5
2017-08-24 20:19



O podría usar jQuery:

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

4
2018-04-15 14:36



Debe usar esta propiedad y valor de CSS en su li:

pointer-events:all;

Por lo tanto, puede manejar el enlace con jQuery o JavaScript, o usar un a etiqueta, pero todos los otros elementos de etiqueta dentro del li debe tener la propiedad CSS:

pointer-events:none;

1
2018-05-12 20:54



Siempre puede ajustar toda la etiqueta li con la etiqueta hiperlink Aquí está mi solución:

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


0
2017-07-25 15:03



Coloque el elemento de la lista dentro del hipervínculo en lugar de al revés.

Por ejemplo con tu código:

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

-3
2017-08-18 14:22