html title attribute

¿Cómo hago para que un elemento de entrada ocupe todo el espacio horizontal restante?

Question

Aquí está el código:

<div style="width:400px">
some text..
<input type="text" />
<button value="click me" />
</div>

¿Cómo puedo hacer que el elemento de entrada se expanda para llenar todo el espacio restante, mientras permanezco en la misma línea? Si pongo el 100%, va a una línea propia ...

Answer 1

Si desea una decisión entre navegadores, puede usar la tabla

<table>
<tr>
<td>some text</td>
<td><input type="text" style="width:100%" /></td>
<td><button value="click me" /></td>
</tr>
</table>

Si no puedes usar la mesa, sería más difícil. Por ejemplo, si conoce exactamente el ancho del texto, puede intentarlo de esta manera:

<div style="padding:0px 60px 0px 120px;">
<div style="width:120px; float:left; margin:0px 0px 0px -120px;">some text</div>
<input type="button" style="width:50px; float:right; margin:0px -55px 0px 0px;" />
<input type="text" style="width:100%;" />
</div>

Answer 2

Si no te importa el soporte de navegadores antiguos (IE <= 9) usa un diseño de flexbox :

div{
background-color: red;
display: flex;
display: -webkit-flex;
display: -ms-flex;
display: -moz-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
}
div input {
flex: 1;
-webkit-flex:1;
-ms-flex: 1;
-moz-flex: 1;
min-width: 200px;
}

Answer 3

Ver: http://jsfiddle.net/thirtydot/rQ3xG/466/

Esto funciona en IE7 + y en todos los navegadores modernos.

.formLine {
overflow: hidden;
background: #ccc;
}
.formLine input {
width: 100%;
}
.formLine label {
float: left;
}
.formLine span {
display: block;
overflow: hidden;
padding: 0 5px;
}
.formLine button {
float: right;
}
.formLine input, .formLine button {
box-sizing: border-box;
}

<div class="formLine">
<button>click me</button>
<label>some text.. </label>
<span><input type="text" /></span>
</div>

El button debe ir primero en el HTML. Un poco desagradable, pero c''est la vie.

El paso clave es usar overflow: hidden; : por qué esto es necesario se explica en:

• http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
• ¿Cómo funciona el contexto de formato de bloque CSS?

El lapso extra alrededor de la input es necesario porque display:block; no tiene ningún efecto para la input : ¿Qué hay en el CSS / DOM que impide que un cuadro de entrada con visualización: el bloque se expanda al tamaño de su contenedor