¿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:¿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?

<html> 
<body> 
<div style="width: 700px;"> 
<span>test</span> 
<input style="width: 100%;"></input> 
</div> 
</body> 
</html>

Pero esto no hace lo que yo 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 de la div, sin ir a la siguiente línea. ¿Cómo puedo hacer eso?

Fuente

2011-06-29 Thiago

En general, se trata de no es factible con CSS si desea que ambos elementos tengan anchuras fluidas. Además, considere: ¿qué debería pasar si uno o ambos elementos (en conjunto) tienen contenido que no encaja en 700px? – Jon

Si necesita ancho adecuado de líquidos:

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:

<div class="inputContainer"> 
    <label>test</label> 
    <div><input /></div> 
</div>

Fuente

2011-06-29 20:53:12 thirtydot

mejor respuesta hasta ahora – amosrivera

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

<div style="width: 700px;"> 
<span style="width:20%">test</span> 
<input style="width: 80%;"></input> 
</div>

Eso debería funcionar mejor.

Fuente

2011-06-29 20:44:43

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

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

Una solución alternativa, usando jQuery podrían ser los siguientes:

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

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

P.S Retire </input>, no es necesario.

Fuente

2011-06-29 20:44:45 Sotiris

Simplemente configúrelos para que su ancho total sea de alrededor del 100% y float uno al lado del otro. En su fragmento, el input ocupa el 100% del div, por lo que el lapso tiene que 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 float indica al navegador que ambos estén lo más a la izquierda posible, y dado que pueden caber, terminan uno al lado del otro en la misma línea. : D

<html> 
<body> 
<div style="width: 700px;"> 
<span style="width: 49%; float: left; background-color: blue;">test</span> 
<input style="width: 49%; float: left; background-color: green;"></input> 
</div> 
</body> 
</html>

Fuente

2011-06-29 20:46:47

intentar algo como esto:

<html> 
<head> 
<style type="text/css"> 

    div { width: 700px; } 

    label { display: block; text-align: right; } 

    label > input { width: 50%; } 

</style> 
</head> 
<body> 

<div> 

<label for="user-name">User Name: <input name="user" id="user-name" /></label> 

</div> 

</body> 
</html>

utilizando una etiqueta en lugar de un SPAN hace que funcione sin problemas para los ciegos.

El ajuste "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.

Configurando "ancho: 50%" en la ENTRADA hace que ocupe la mitad del ancho de la ETIQUETA.

La "alineación de texto: 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.

Fuente

2011-06-29 20:47:20

<html> 
<style type="text/css"> 

.left { 
    float:left; 
    width:15%; 
    margin:0px auto; 
    padding:0px; 
} 

.right { 
    float:right; 
    width:85%; 
    margin:0px auto; 
    padding:0px; 
} 

.clearthis { 
    width:100%; 
    margin:0px auto; 
    padding:0px; 
    clear:both; 
} 

</style> 
<body> 
<div style="width: 700px;"> 
    <div class="left"> 
     <span>test</span> 
    </div> 
    <div class="right"> 
     <input style="width: 100%;"></input> 
    </div> 
    <div class="clearthis"></div> 
</div> 
</body> 
</html>

algo como esto debería funcionar

Fuente

2011-06-29 20:52:11

lo tengo que utilizan tablas:

<html> 
<body> 
<div style="width: 700px;"> 
    <table border="0" style="width: 100%;"> 
    <tr> 
    <td><span>test</span></td> 
    <td style="width: 100%;"><input style="width: 100%;"></input></td> 
    </tr> 
    </table> 
</div> 
</body> 
</html>

Fuente

2011-06-29 21:06:54 Thiago

Oh, por favor, no. Hemos visto esta película antes, y termina mal. Dirijo tu atención a: http://www.hotdesign.com/seybold/everything.html –

Lo sé, pero tienes que hacer lo que tienes que hacer para :-) Pero hay una mejor respuesta. – Thiago

Una alternativa a DIV y CSS es utilizar la tabla:

<table> 
<tr> 
<td><span>Username</span></td> 
<td><input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username"> 
</td> 
</tr> 
<tr> 
<td><span>Password</span></td> 
<td><input id="password" name="password" value="" type="password" placeholder="Password"> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<button type="submit">Login</button> 
</td> 
</tr> 
</table>

Fuente

2013-12-18 03:45:35 shamsieh76

Esto funcionará, pero debe evitarse si desea un diseño receptivo. – Amicable

¿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?

Respuesta

Cuestiones relacionadas