CSS - elementos de la lista de navegación horizontal para completar todos los spce disponibles

Usando CSS, ¿cómo es posible tener una lista horizontal y tener todos los elementos de la lista para llenar el ancho disponible del espacio padre?CSS - elementos de la lista de navegación horizontal para completar todos los spce disponibles

Estoy flotando a la izquierda y luego aplicando algo de relleno a cada una, pero parece que no puedo llenar todo el ancho. Dejando un espacio en el lado derecho.

Posiblemente podría flotar el último elemento correctamente, pero lo que sucede es que el estado activo de los elementos de navegación por lo tanto, resaltaría el espacio ya que hay un borde aplicado a la parte superior de la lista activa. Esto mostraría la brecha.

Fuente

2011-05-07 David

HUH? ¿Codifica un ejemplo de cómo estás haciendo esto? si flotas, debes especificar el ancho. Los elementos flotantes no conocen el ancho: 100%; – robx

tratarlo como tabla:

<!DOCTYPE html> 
<html lang="pl"> 
<head> 
    <meta charset="utf-8" /> 
    <style> 
     nav {width: 500px;} 
     nav ul { 
      list-style: none; 
      margin:0; 
      padding:0; 
      display: table; 
      background: red; 
      width: 100%; 
     } 
     nav li { 
      z-index:10; 
      text-align: center; 
      display: table-cell; 
     } 
     nav a { 
      color: #fff; 
      text-decoration: none; 
      padding: 0 10px 0; 
      height: 20px; 
      line-height: 20px; 
      display: block; 
      text-align: center; 
      background: blue; 
     } 
    </style> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#">Lorem</a></li> 
      <li><a href="#">ipsum</a></li> 
      <li><a href="#">dolor</a></li> 
      <li><a href="#">sit</a></li> 
      <li><a href="#">amet</a></li> 
     </ul> 
    </nav> 
</body> 
</html>

http://jsfiddle.net/SURzu/

Fuente

2011-05-07 15:46:59 seler

He intentado lo que no funcionó, todavía tengo esa brecha. El principal problema es que los diferentes elementos del menú pueden tener diferentes longitudes de texto, por lo que no puedo darle a cada uno un ancho. – David

@David, he editado la publicación para darle un ejemplo completo. Buena suerte. – seler

Gracias funciona perfet - tuve otros estilos que lo afectan. – David

CSS - elementos de la lista de navegación horizontal para completar todos los spce disponibles

Respuesta

Cuestiones relacionadas