2010-08-17 15 views
20

Tengo el siguiente punto li:Deje que el espacio ocupe el ancho restante?

<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 llenar todo lo ancho se queda en su li padres. ¿Hay una manera de hacer eso?

Gracias

Respuesta

18

Usted no quieren flotar cada uno de ellos se fueron, sólo el primero, y luego hacer la segunda pantalla en el modo de bloque:

<li> 
    <span style='float:left; background-color:red'>a</span> 
    <span style="display: block; background-color:green;">b</span> 
</li> 
+8

Esto no es correcto (tampoco lo es la otra respuesta): Span no llena el resto del ancho, rellena todo el ancho, se superponen dos tramos. – Daddy32

+4

Puede evitar que los intervalos se superpongan estableciendo 'overflow: hidden;' en el segundo. – pvans

7

buscado la misma solución, pero sólo esto encontrado 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 necesita es simplemente el uso de celdas de tabla que muestra y s y anchura del tramo de relleno al 100%. Todas las demás soluciones que he probado no funcionaron para mí como se esperaba.

+0

Has hecho un error tipográfico en el segundo lapso: "dispaly". También las comillas son tradicionalmente dobles cuando se establece el estilo, por lo que debería ser: style = "..." –

+3

@ LechOsiński Gracias, corregido. ¿Qué pasa con las "tradiciones de doble cita"? No estoy seguro de que las tradiciones tengan algún sentido en TI/ciencia. W3.org no tiene preferencia por ningún tipo de cotizaciones por cierto. –

Cuestiones relacionadas