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