CSS marca de texto llenar toda la anchura disponible

Question

Tengo el siguiente "línea" en mi página Web

<div style="width:100%"> 
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button> 
</div> 

El control desplegable que realmente no tienen control sobre el ancho, ya que los tamaños para adaptarse a lo que sea el más largo el valor de la opción es. Los botones son de ancho fijo. ¿Cómo puedo obtener el TextBox para llenar todo el ancho restante disponible?

Intenté ponerlo en una tabla pero me encontré con el mismo problema, es decir, ¿cómo hago para que todas las demás columnas sean lo más pequeñas posible y que la columna TextBox complete el ancho restante?

Las soluciones de Hacky están bien si es necesario, hace tiempo que renuncié a pretender siquiera preocuparme por los estándares de CSS cuando es tan difícil hacer lo más simple.

Editar: para aclarar, por cuadro de texto que quiero decir <input type="text"/>

Answer 1

Sé que esto es una cuestión de edad, pero la solución correcta no está aquí, así que por si acaso alguien encuentra allí hasta aquí:

La solución es envolver la caja de texto en un lapso.

HTML:

<label>Input</label> 
<span> 
    <input/> 
</span> 

CSS:

label { 
    float: left; 
} 

input { 
    width: 100%; 
    box-sizing:border-box; 
} 

span { 
    display: block; 
    overflow: hidden; 
} 

Ver this fiddle para un ejemplo (ahora un poco fuera de fecha ya me quita el relleno en favor del uso de la frontera de la caja en la entrada).

Answer 2

puede establecer el ancho del cuadro de texto al 100% (con CSS como lo hizo con el div), por lo que será abarcó a la alcance completo de su padre (suponiendo que la etiqueta padre extiende la pantalla completa).

Answer 3

Yo sugeriría lo siguiente:

<div style="width:100%; white-space:nowrap"> 
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button> 
</div> 

Answer 4

La única manera que veo factible es con Javascript, por lo que obtener el ancho de la div (en píxeles), deducir el tamaño actual de los otros controles y agregue el resultado como con de la entrada. Eso requeriría que coloque el texto dentro de un control de tramo (para que pueda obtener su tamaño).

Answer 5

Establezca el ancho de textbox al 100% con la propiedad css display: inline;?

Answer 6

Esto es lo que funcionó para mí. Tenga en cuenta que en algunos casos tuve que usar   entre los artículos, de lo contrario, cayó a la siguiente línea.

.flexContainer { 
 
    display: flex; 
 
    width:100%; 
 
} 
 
input { 
 
    width: 100%; 
 
}

<div class="flexContainer"> 
 
<span>text:&nbsp;</span> <input/> &nbsp; <label>text</label> 
 
</div>

Answer 7

esto no es factible en el CSS en lo que se refiere a Chrome. La forma más factible es manipular el size attribute del control de formulario a través de JavaScript. Si la longitud de la cadena es 25, agregue un extra de al menos 10 para el espacio libre.

HTML

<!-- "The quick brown fox jumps over the lazy dog" is 43 characters long --> 
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" /> 

JavaScript/jQuery

<script> 
    var value = jQuery('#textbox1').val();     // 43 
    jQuery('#textbox1').attr('size', value.length + 10); // resizes the textbox 
</script> 

Otra opción también está pre-calcular el tamaño de un guión de fondo.

PHP/HTML

<?php 
$value = "The quick brown fox jumps over the lazy dog"; 
?> 
<input type="text" value="<?php echo $value; ?>" size="<?php echo (strlen($value) + 10); ?>" />