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

Intento crear un CSS fluid tab menu con CSS fluid tab menu , con un número variable de tabs (similar a lo que se puede ver en Windows, donde las tabs se expanden según la longitud del encabezado contenido, ver más abajo).

enter image description here

Aquí hay un ejemplo, tengo configuration (necesito 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 networking; 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á lo siguiente:

enter image description here

Cuando encojo la pantalla, el menu se divide en varias líneas con el último elemento rellenando el ancho restante:

enter image description here

Mi problema es expandir los elementos en "la primera fila" para cubrir el espacio disponible una vez que el menu se rompe. Simplemente estableciendo el min-width: 19% el problema es min-width: 19% , pero no puedo hacer que nada funcione.

Pregunta :
¿Cómo haría los elementos en una "fila" (no es realmente una fila, si se divide en varias filas) ocupará todo el espacio disponible utilizando solo CSS?

EDITAR :
Aquí hay una página de muestra que muestra lo que quiero decir. Reducir la window del browser 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.

ACTUALIZAR :
He actualizado la página de muestra. Mira aquí . 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.

enter image description here

Entonces la brecha al lado del elemento "Cuatro" necesita ser cerrada

enter image description here

Ahora la brecha junto al elemento "Tres" debe ser cerrada. Puede ver que no funciona establecer algo en el elemento "Cuatro", porque no siempre estará en la position 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!

4 Solutions collect form web for “cómo hacer que los elementos horizontales se expandan para cubrir el espacio disponible?”

Lo primero que se me ocurre es que, dado que ya está configurando su .test div para display: table , quizás configure su .test .element para que se 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 la display: table-cell , pero hay soluciones al respecto. Uno estando aquí . 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!

violín

Puede hacer esto con solo una <table> con un ancho del 100%;

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

Aquí está la demostración en vivo.

Si desea mantenerlos en una fila y usar todo el espacio que tienen, no importa cuántos elementos tenga, usar display: table, table-row y table-cell es la solución real. Pero debes usar los 3 para que funcione. Entonces lo que necesitas 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; } 

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

Si desea la funcionalidad de varias líneas, debe usar un poco de Javascript para verificar su window y luego especifíquelas en dos lists para que

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

Si puede usar Javascript y jQuery, hay una solución.

mira esta Demo

Personalmente, no creo que esta sea la mejor solución, pero puede ser que también te pueda ayudar. Esta demostración está preparada para trabajar solo por 2 filas.

  • Complejidad de una expresión jQuery
  • ¿Cómo usar 'contains' en una statement if?
  • Formato de text y classs de Moment.js
  • Alinear el text SELECT-OPTIONS a la derecha
  • Establecer un límite de longitud para los elementos <p>
  • La function Looping causa que no responda en javascript
  • Condiciones en javascript
  • obteniendo todos los comentarios de publicaciones debajo del límite usando la consulta de Facebook fql
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.