html - span - Elemento de entrada de estilo para rellenar el ancho restante de su contenedor

span style font

Question

Digamos que tengo un fragmento de html como este:

<div style="width:300px;">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" />
</div>

Este no es mi código exacto, pero lo importante es que hay una etiqueta y una entrada de texto en la misma línea en un contenedor de ancho fijo. ¿Cómo puedo aplicar estilo a la entrada para llenar el ancho restante del contenedor sin envolver y sin saber el tamaño de la etiqueta?

Answer 1

Aquí hay una solución simple y limpia sin usar JavaScript o hacks de diseño de tabla. Es similar a esta respuesta: Ancho de texto automático de entrada que completa el 100% con otros elementos flotantes

Es importante envolver el campo de entrada con un lapso que es display:block . Lo siguiente es que el botón debe estar primero y el campo de entrada en segundo lugar.

Luego puede flotar el botón a la derecha y el campo de entrada llena el espacio restante.

HTML

<form method="post">
<button>Search</button>
<span><input type="text" title="Search" /></span>
</form>

CSS

form {
width: 500px;
overflow: hidden;
background-color: yellow;
}
input {
width: 100%;
}
span {
display: block;
overflow: hidden;
padding-right:10px;
}
button {
float: right;
}

Un simple violín: http://jsfiddle.net/v7YTT/90/

Actualización 1: si su sitio web está dirigido solo a los navegadores modernos, sugiero usar cajas flexibles . Aquí puedes ver el soporte actual .

Actualización 2: Esto incluso funciona con múltiples botones u otros elementos que comparten el todo con el campo de entrada. Aquí hay un ejemplo .

Answer 2

El truco más fácil es usar una fórmula CSS calc . Todos los navegadores modernos, IE9, una amplia gama de navegadores móviles deberían ser compatibles.

<div style=''white-space:nowrap''>
<span style=''display:inline-block;width:80px;font-weight:bold''>
<label for=''field1''>Field1</label>
</span>
<input id=''field1'' name=''field1'' type=''text'' value=''Some text'' size=''30'' style=''width:calc(100% - 80px)'' />
</div>

Answer 3

La forma más fácil de lograr esto sería:

CSS:

label{ float: left; }
span
{
display: block;
overflow: hidden;
padding-right: 5px;
padding-left: 10px;
}
span > input{ width: 100%; }

HTML:

<fieldset>
<label>label</label><span><input type="text" /></span>
<label>longer label</label><span><input type="text" /></span>
</fieldset>

Parece que: http://jsfiddle.net/JwfRX/

Answer 4

Por favor usa flexbox para esto. Tienes un contenedor que va a poner a sus hijos en una fila. El primer niño toma su espacio según sea necesario. El segundo se flexiona para tomar todo el espacio restante:

<div style="display:flex;flex-direction:row">
<label for="MyInput">label&nbsp;text</label>
<input type="text" id="MyInput" style="flex:1" />
</div>

Answer 5

Por mucho que todos odien las tablas para el diseño, ayudan con cosas como esta, ya sea usando etiquetas de tabla explícitas o usando display: table-cell

<div style="width:300px; display:table">
<label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
<input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

Answer 6

Sugiero usar Flexbox:

¡Sin embargo, asegúrese de agregar los prefijos propios del proveedor!

form {
width: 400px;
border: 1px solid black;
display: flex;
}
input {
flex: 2;
}
input, label {
margin: 5px;
}

<form method="post">
<label for="myInput">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input"/>
</form>

Answer 7

puedes probar esto:

div#panel {
border:solid;
width:500px;
height:300px;
}
div#content {
height:90%;
background-color:#1ea8d1; /*light blue*/
}
div#panel input {
width:100%;
height:10%;
/*make input doesnt overflow inside div*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*make input doesnt overflow inside div*/
}

<div id="panel">
<div id="content"></div>
<input type="text" placeholder="write here..."/>
</div>