Pregunta Deje que el span complete el ancho restante?


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


21
2017-08-17 04:20


origen


Respuestas:


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>

19
2017-08-17 04:26



No flote el segundo, y hágalo display:block.

http://jsfiddle.net/ymAt5/


7
2017-08-17 04:26



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.


7
2017-10-03 11:01