Tengo el siguiente artículo li:
<li>
<span style='float:left; background-color:red'>a</span>
<span style='float:left; background-color:green'>b</span>
</li>
Me gustaría que el lapso de la derecha para completar el ancho restante en su li padre. ¿Hay una manera de hacer eso?
Gracias
No desea hacer flotar cada una de ellas, solo la primera, y luego hacer que la segunda se muestre en modo bloque:
<li>
<span style='float:left; background-color:red'>a</span>
<span style="display: block; background-color:green;">b</span>
</li>
No flote el segundo, y hágalo display:block.
Busqué la misma solución, pero encontré solo esto que funcionó muy bien para mí:
<li>
<span style='display: table-cell; background-color:red'>a</span>
<span style='display: table-cell; width: 100%; background-color:green'>b</span>
</li>
Todo lo que necesitas es simplemente usar visualización de celda de tabla y establecer el ancho del tramo de relleno al 100%. Todas las demás soluciones que he probado no funcionaron para mí como se esperaba.