html - como - Cómo estirar una cantidad fija de elementos de navegación horizontal de manera uniforme y completa a través de un contenedor especificado

centrar menu css

Question

Me gustaría extender 6 elementos de navegación de manera uniforme a través de un contenedor de 900 px, con una cantidad uniforme de espacio en blanco entre ellos. Por ejemplo...

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

Actualmente, el mejor método que puedo encontrar para hacer esto es el siguiente:

nav ul {
  width: 900px; 
  margin: 0 auto;
}

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 150px;
}

El PROBLEMA con esto es doble. En primer lugar, no lo justifica realmente, sino que distribuye las etiquetas li uniformemente a lo largo de la etiqueta ul ... creando un espacio en blanco desigual entre elementos de menú más pequeños como "INICIO" o "ABOUT" y otros más grandes como "SERVICIOS BÁSICOS" .

El segundo problema es que el diseño se rompe si un elemento de navegación es más grande que 150px, lo que SPECIALTY SERVICES es, a pesar de que hay espacio más que suficiente para todo el sistema de navegación.

¿Alguien puede resolver esto por mí? He estado buscando en la web soluciones, y todas parecen fallar. CSS / HTML solo si es posible ...

¡Gracias!

ACTUALIZACIÓN (29/07/13): El uso de la celda de tabla es la mejor manera moderna de implementar este diseño. Ver la respuesta de Felix a continuación. La propiedad de table cell funciona en el 94% de los navegadores actualmente. Tendrás que hacer algo sobre IE7 y debajo, pero de lo contrario debería estar bien.

ACTUALIZACIÓN (30/7/13): Desafortunadamente, hay un error de webkit que afecta esto si está combinando este diseño con Media Queries. Por ahora, deberá evitar cambiar la propiedad ''mostrar''. Ver error de Webkit.

ACTUALIZACIÓN (25/7/14): Hay una mejor solución para esto a continuación que ahora implica text-align: justify. Usar esto es más simple y evitarás el error Webkit.

Answer 1

¿Has intentado establecer el ancho del li a, digamos, 16% con un margen de 0.5%?

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 16%;
  margin-right: 0.5%;
}

editar: establecería el UL al 100% de ancho:

nav ul {ancho: 100%; margen: 0 auto; }

Answer 2

En lugar de definir el ancho, puede simplemente poner un margen izquierdo en su li, para que el espaciado sea constante, y solo asegúrese de que los márgenes + li se ajusten a 900px.

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  margin-left: 35px;
}

Espero que esto ayude.

Answer 3

Este es el tipo de cosas que corregirá el modelo CSS Flexbox, porque le permitirá especificar que cada li recibirá una proporción igual del ancho restante.

Answer 4

Este realmente funciona También tiene la ventaja de que puede usar consultas de medios para desactivar fácilmente el estilo horizontal, por ejemplo, si desea apilarlos verticalmente cuando está en un teléfono móvil.

HTML

<ul id="nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS

​
#nav {
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid #fff;
    white-space: nowrap;
}​

@media (max-width: 767px) {
    #nav li {
        display: block;
        width: 100%;
    }
}

http://jsfiddle.net/timshutes/eCPSh/416/

Answer 5

Esto debería hacerlo por ti.

<div id="nav-wrap">
    <ul id="nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

#nav-wrap {
    float: left;
    height: 87px;
    width: 900px;
}

#nav {
    display: inline;
    height: 87px;
    width: 100%;
}

.nav-item {
    float: left;
    height: 87px;
    line-height: 87px;
    text-align: center;
    text-decoration: none;
    width: 150px;

}

Answer 6

Intenté todo lo anterior y los encontré queriendo. Esta es la solución más simple y flexible que pude encontrar (gracias a todo lo anterior por mi inspiración).

HTML

<div id="container">
<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>
</div>

CSS

div#container{
  width:900px;
  background-color:#eee;
    padding:20px;
}
ul {
    display:table;
    width: 100%;
    margin:0 0;
    -webkit-padding-start:0px; /* reset chrome default */
}
ul li {
    display:table-cell;
    height:30px;
    line-height:30px;
    font-size:12px;    
    padding:20px 10px;
    text-align: center;
    background-color:#999;
    border-right:2px solid #fff;
}
ul li:first-child {
    border-radius:10px 0 0 10px;
}
ul li:last-child {
    border-radius:0 10px 10px 0;
    border-right:0 none;
}

Puedes soltar el primero / último extremo redondeado para niños, obviamente, pero creo que son reales (y tu cliente también;)

El ancho del contenedor limita la lista horizontal, pero puede deshacerse de esto y simplemente aplicar un valor absoluto a UL si lo desea.

Juega con él, si quieres ...

http://jsfiddle.net/tobyworth/esehY/1/

Answer 7

No me atrevo a ofrecer esto ya que hace un mal uso del html. No es una solución BUENA, pero es una solución: use una mesa.

CSS:

table.navigation {
    width: 990px;
}
table.navigation td {
    text-align: center;
}

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="navigation">
    <tr>
        <td>HOME</td>
        <td>ABOUT</td>
        <td>BASIC SERVICES</td>
        <td>SPECIALTY SERVICES</td>
        <td>OUR STAFF</td>
        <td>CONTACT US</td>
    </tr>
</table>

Esto no es para lo que se crearon las tablas, pero hasta que podamos realizar de manera confiable la misma acción de una mejor manera , creo que es prácticamente permisible.

Answer 8

Una solución ideal:

1. Escala automáticamente al ancho del contenedor de navegación
2. Admite una cantidad dinámica de elementos de menú.

Usando un menú simple de ul dentro de un contenedor de nav , podemos construir una solución que cumpla con los requisitos anteriores.

HTML

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Basic Services</li>
    <li>Specialty Services</li>
    <li>Our Staff</li>
    <li>Contact Us</li>
  </ul>
</nav>

Primero, necesitamos forzar al ul a tener todo el ancho de su contenedor de nav . Para lograr esto, utilizaremos :after del elemento psuedo con width: 100% .

Esto logra nuestro objetivo perfectamente, pero agrega espacios en blanco al final del elemento psuedo. Podemos eliminar este espacio en blanco en todos los navegadores a través de IE8 estableciendo la line-height de line-height de la ul en 0 y restableciéndola al 100% en sus hijos li . Vea el ejemplo de CodePen y la solución a continuación:

CSS

nav {
  width: 900px;
}

nav ul {
  text-align: justify;
  line-height: 0;
  margin: 0;
  padding: 0;
}

nav ul:after {
  content: '''';
  display: inline-block;
  width: 100%;
}

nav ul li {
  display: inline-block;
  line-height: 100%;
}

Answer 9

Use text-align:justify en el contenedor, de esta forma funcionará independientemente de cuántos elementos tenga en su lista (no tiene que calcular% anchos para cada elemento de la lista)

FIDDLE

<ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BASIC SERVICES</a></li>
    <li><a href="#">OUR STAFF</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>

CSS

#nav {
    text-align: justify;
    min-width: 500px;
}
#nav:after {
    content: '''';
    display: inline-block;
    width: 100%;
}
#nav li {
    display: inline-block;
}

Answer 10

si puedes, usa flexbox:

<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>

ul {
  display: flex;
  justify-content:space-between;
  list-style-type: none;
}

jsfiddle: http://jsfiddle.net/RAaJ8/

El soporte del navegador es realmente bastante bueno (con prefijos y otras cosas desagradables): http://caniuse.com/flexbox

Answer 11

padding-right: 28px; muchas cosas diferentes y finalmente encontré que lo que funcionó mejor para mí fue simplemente agregar padding-right: 28px;

Jugué con el relleno para obtener la cantidad correcta para espaciar uniformemente los elementos.

Answer 12

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 100%; border: 1px solid black; display: block; text-align: justify; }
object, span { display: inline-block; }
span { width: 100%; }
</style>
</head>

  <div id="container">
    <object>
      <div>
      alpha
      </div>
    </object>
    <object>
      <div>
      beta
      </div>
    </object>
    <object>
      <div>
      charlie
      </div>
    </object>
    <object>
      <div>
      delta
      </div>
    </object>
    <object>
      <div>
      epsilon
      </div>
    </object>
    <object>
      <div>
      foxtrot
      </div>
    </object>
    <span></span>
  </div>
</html>