cómo hacer que los elementos horizontales se expandan para cubrir el espacio disponible?

Question

Estoy tratando de crear un CSS fluid tab menu, con un número variable de pestañas (similar a lo que se puede ver en Windows, donde las pestañas se expanden según la longitud del encabezado contenido, ver a continuación).

Aquí está un ejemplo, he fijado (Tengo que mantener la estructura del elemento):

<div class="test"> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">very long text is this</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Two</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Three</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Four</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
    <div class="element"> 
     <h3> 
      <span class="dummy-a"> 
       <span class="dummy-ui-btn-inner"> 
        <span class="dummy-ui-btn-text">Five</span> 
       </span> 
      </span> 
     </h3> 
    </div> 
</div> 

y CSS:

.test { width: 100%; display: table; } 
.test .element { border: 1px solid red; float: left; min-width: 19%; } 
.test .element.prelast { border: 1px solid green; } 
.test .element.last { float: none !important; overflow: hidden; } 
.test .element h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

Esto creará la siguiente:

Cuando me encojo la pantalla, el menú se rompe a varias líneas con el último elemento que llenan el ancho restante:

Mi problema está expandiendo los elementos en "la primera fila" para cubrir el espacio disponible una vez el menú se rompe Simplemente establecer min-width: 19% es el problema, pero no puedo hacer que nada funcione.

Pregunta:
¿Cómo puedo hacer los elementos en una "fila" (que no es realmente una fila, si se rompe en varias filas) ocupar todo el espacio disponible utilizando sólo CSS?

EDITAR:
Here es una página de ejemplo que muestra lo que quiero decir. Reducir la ventana del navegador y ver cómo se comportan los elementos. Estoy buscando una manera de hacer que la primera fila se expanda a lo ancho DESPUÉS de dividirla en varias líneas.

ACTUALIZACIÓN:
He actualizado la página de muestra. Ver here. No tengo problemas para expandir elementos mientras están todos "en una fila". El problema comienza cuando la fila "se rompe" en varias filas. Me gustaría saber si es posible llenar el espacio superior derecho haciendo que los elementos se expandan por toda la pantalla.

Aquí hay dos capturas de pantalla adicionales.

Así la brecha junto al elemento de "Cuatro" necesita ser cerrado

Ahora la brecha junto al elemento de "Tres" necesita ser cerrado. Puede ver que no funciona establecer algo en el elemento "Cuatro", porque no siempre estará en la posición superior derecha. Más bien debería ser una regla de CSS que establezco en todos los elementos (supongo).

Además, si esto puede hacerse fácilmente usando Javascript/Jquery, ¿también podría escuchar ideas?

Gracias por ayudar!

Answer 1

Lo primero que se me ocurre es que, dado que ya se está configurando su .test div a display: table, tal vez establecido su .test .element a display: table-cell. Esto los mantendrá a todos en la misma fila y solo se expandirá al 100%. Lo único es que < IE8 no maneja display: table-cell, pero hay soluciones al respecto. Uno siendo here. No estoy seguro de si esto realmente logra exactamente lo que quieres, pero es una posibilidad. Sin embargo, mantendré mi subconsciente pensando en ello. ¡Buena pregunta!

fiddle

Answer 2

Es posible hacer esto con sólo un <table> tiene una anchura de 100% similares;

<table class="menu" cellpadding="0" cellspacing="0"> 
<tr> 
<td>menu1</td> 
<td>menu2</td> 
<td>menu3</td> 
<td>menu4</td> 
<td>menu5</td> 
</tr> 
</table> 

y en CSS como;

.menu{ 
    width: 100%; 
} 
.menu tr td{ 
    height: 20px; 
    background: gray; 
    cursor: pointer; 
    text-align: center; 
} 
.menu tr td:hover{ 
    background: white; 
} 

Here es la demostración en vivo.

Answer 3

Si puede usar Javascript y jQuery existe una solución.

check this Demo

Personalmente no creo que esta es la mejor solución, pero puede ser que le puede ayudar a esta demo también está preparado para trabajar por sólo 2 filas

Answer 4

Si desea mantener en una fila y usando todo el espacio que tienen, no importa cuántos elementos tengas, usando display: table, table-row y table-cell es la solución real. Pero debes usar los 3 para que funcione. Así que lo que necesita es

<div class="menu"> 
    <ul> <!-- Menus should usually be Lists if it's your choice --> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
     <li>Five</li> 
    </ul> 
</div> 

y luego en css

.menu { display: table; width: 100%; } 
.menu ul { display: table-row; width: 100%; } 
.menu ul li { display: table-cell; } 

que es toda la magia. Entonces tus celdas siempre usan el espacio completo.

Si desea que la funcionalidad de múltiples líneas, usted tiene que utilizar un poco de Javascript para comprobar su ventana con sperate y luego en dos listas por lo que es

<div class="menu"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
     <li>Four</li> 
    </ul> 
    <ul> 
     <li>Five</li> 
    </ul> 
</div>