¿Cómo puedo hacer que un tramo y una entrada se coloquen uno al lado del otro y colectivamente ocupen el 100% del ancho del div que contiene?

Tengo el siguiente fragmento:

  
test

Pero esto no hace lo que quiero. Quería que el lapso y la entrada juntas representaran el 100% de la div, es decir, que la entrada comenzara justo donde termina el lapso y se llene hasta el ancho del div, sin ir a la siguiente línea. ¿Cómo puedo hacer eso?

Si necesita un ancho de fluido adecuado :

Ver: http://jsfiddle.net/kxEML/

CSS:

 .inputContainer { width: 300px; border: 1px dashed #f0f } .inputContainer label { float: left; margin-right: 5px; background: #ccc } .inputContainer div { overflow: hidden; } .inputContainer input { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block } 

HTML:

 

Por supuesto que no funciona. Tu entrada toma todos los 700px.

 
test

Eso debería funcionar mejor.

Usando width:100% para la input lo hará 700px . Agregando el ancho requerido del texto, haga la fila más grande, como resultado, la input va a la siguiente línea. De modo que podría cambiar el width de input al 95% para ajustarse a la línea.

Demostración: http://jsfiddle.net/q75C8/

Una solución alternativa, usando jQuery podría ser la siguiente:

 $("input").width(($("div").width()-10)-$("span").width()); 

Demostración: http://jsfiddle.net/q75C8/2/

PS Eliminar , no es obligatorio.

Simplemente configúrelos para que su ancho sea de alrededor del 100% y float uno al lado del otro. En tu fragmento, la input ocupa el 100% del div, por lo que el lapso debe ir por encima. Para que puedan ingeniarse en la misma línea, tienen que tener una longitud total de menos de 100% o 700px para caber en el div. Establecer la propiedad de float dice al navegador que los coloque lo más a la izquierda posible, y dado que pueden caber, terminan uno al lado del otro en la misma línea. :RE

   
test

Pruebe algo como esto:

      

Usar una ETIQUETA en lugar de un SPAN lo hace funcionar sin problemas para los ciegos.

Establecer “display: block” en la etiqueta hace que se expanda al 100% del ancho de su contenedor (el DIV), y comienza en una línea por sí mismo.

Al establecer “ancho: 50%” en la ENTRADA, toma la mitad del ancho de la ETIQUETA.

El “texto-alinear: derecha” hace que el texto de la etiqueta quede al ras contra el comienzo de la ENTRADA.

EDITAR: Ah, y tenga en cuenta que el atributo FOR de la ETIQUETA se refiere a la ID de la ENTRADA, no a su NOMBRE. Ejemplo editado para aclarar eso.

    
test

Algo como esto debería funcionar

Lo obtuve usando tablas:

   
test

Una alternativa a Div y CSS es usar la tabla:

 
Username
Password