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


95

Tengo una barra de navegación horizontal hecha de una lista desordenada, y cada elemento de la lista tiene mucho relleno para que se vea bien, pero la única área que funciona como enlace es el texto en sí. ¿Cómo puedo permitir que el usuario haga clic en cualquier parte del elemento 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>

Respuestas:


109

No ponga relleno en el elemento 'li'. En su lugar, establezca la etiqueta de anclaje display:inline-block;y aplíquele relleno.


display: inline; zoom: 1;en un comentario condicional para IE6 e IE7 reemplazará, display: inline-block;aunque sí, si los elementos de la lista ya están flotando, display: block;también estará bien
FelipeAls

Eso funcionó muy bien, solo una queja, no pareció funcionar con el selector: after. Quería >que apareciera un símbolo después del texto de mi enlace, pero no ponerlo en el contenido ... Terminé simplemente poniéndolo en el contenido. Sería curioso si hay una mejor manera de lograrlo.
contraataque el

46

Defina la propiedad CSS de su etiqueta de anclaje como:

{display:block}

Luego, el ancla ocupará toda el área de la lista, por lo que su clic funcionará en el espacio vacío junto a su lista.


1
Ojalá pudiera arrastrar esta respuesta a la parte superior de la lista de respuestas ... ¡Esta es la mejor solución para este problema!
Rishabh,

1
Se romperán las líneas si hay algo más en li, como un icono.
Gringo Suave

13

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


3
También sugeriría mover el estado de desplazamiento al ancla y fuera del li para una mejor compatibilidad con el navegador.
NinjaBomb

10

Super, super tarde para esta fiesta, pero de todos modos: también puedes diseñar el ancla como un elemento flexible. Esto es particularmente útil para elementos de lista ordenados o de tamaño dinámico.

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: las cajas flexibles todavía no están bien soportadas. ¡Autoprefixer al rescate!)


Pero ahora (unos años después), flex está funcionando bien, así que creo que es la mejor respuesta al crear el menú con uly flexbox.
Ludovic Kuty

10

Utilice lo siguiente:

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

6

O podrías usar jQuery:

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

3
Se puede decir que esta solución es una 'solución jquery sucia que no es necesaria porque puede hacerlo fácilmente con css'. Pero para ser honesto, a veces te encuentras en una situación trabajando con no-tu-código y simplemente no tienes tiempo para conocer toda la estructura DOM y las hojas de estilo css (y tratando de entender 'qué estaba pensando el codificador'). Entonces +1.
lemoide

De acuerdo con @lemoid, tenemos que recordar que las soluciones "bonitas" no siempre son prácticas en la vida real.
UncaAlby

¡¡Te amo!!
Castiblanco

1

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

pointer-events:all;

Entonces, puede manejar el enlace con jQuery o JavaScript, o usar una aetiqueta, pero todos los demás elementos de etiqueta dentro de lideben tener la propiedad CSS:

pointer-events:none;

0

Simplemente aplique el CSS a continuación:

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

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

0

así es como lo hice

Haga el <a>bloque en línea y quite el relleno de su<li>

Entonces puedes jugar con el widthy el heightdel <a>en el<li>

Poner el widthque 100%como punto de partida y ver cómo funciona

PD: - Obtenga la ayuda de las herramientas de desarrollo de Chrome al cambiar heightywidth


-1

Siempre puedes envolver toda la etiqueta li con la etiqueta de hipervínculo 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>


Para robar un comentario de otra respuesta con
voto negativo

-2

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>

@DannyBeckett Es válido en HTML5.
Tek


Tienes razón, estaba pensando en elementos de bloque permitidos dentro de los anclajes, pero no sabía que ul children era una de las excepciones a la regla. w3.org/html/wg/drafts/html/master/… Gracias por la rápida corrección.
Tek

Oh, no, no, no ... su sintaxis y su marcado semántico se fueron por la ventana. Nunca vuelvas a hacer esto, amigo mío, solo hace que la web sea un lugar horrible.
Teodor Sandu
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.