CSS make Textbox füllen alle verfügbaren Breite

Question

ich folgende „Linie“ in meiner Web-Seite haben

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

Die DropDown Steuer ich wirklich nicht die Kontrolle über die Breite haben, da sie unabhängig von der längsten Größen zu passen Optionswert ist. Die Schaltflächen haben eine feste Breite. Wie kann ich mit der TextBox alle verfügbaren Restbreiten füllen?

Ich habe versucht, es in eine Tabelle zu setzen, aber in das gleiche Problem zu laufen, dh wie mache ich alle anderen Spalten so klein wie möglich, um ihren Inhalt anzupassen und dann die TextBox Spalte Restbreite füllen?

Hacky-Lösungen sind in Ordnung, wenn nötig, ich habe vor langer Zeit jeden Vorwand der Pflege von CSS-Standards aufgegeben, wenn es so schwierig ist, die einfachste Sache zu tun.

bearbeiten: zu klären, von TextBox meine ich <input type="text"/>

Answer 1

Ich weiß, das ist eine alte Frage, aber die richtige Lösung ist hier nicht so einfach, wenn jemand anderes dort findet Weg hier:

Die Lösung ist die Textbox in einer Spanne zu wickeln.

HTML:

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

CSS:

label { 
    float: left; 
} 

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

span { 
    display: block; 
    overflow: hidden; 
} 

Siehe this fiddle für ein Beispiel (jetzt etwas veraltet, wie ich Polsterung für den Einsatz von border-Box am Eingang entfernt).

Answer 2

Sie die Breite der Textbox auf 100% einstellen (mit CSS, wie Sie mit dem div taten), so dass es zu dem spannt würde voller Umfang des übergeordneten Elements (vorausgesetzt, das übergeordnete Tag erweitert den gesamten Bildschirm).

Answer 3

Ich würde vorschlagen, die folgende:

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

Answer 4

Die einzige Art, wie ich es machbar sehen muss Javascript aktiviert ist, so dass Sie die Breite des div bekommen (in Pixeln), die aktuelle Größe der anderen Kontrollen abziehen und addiere das Ergebnis wie mit der Eingabe. Das würde erfordern, dass Sie den Text in ein Span-Steuerelement einfügen (damit Sie seine Größe erhalten).

Answer 5

Stellen Sie die Breite des textbox mit der css-Eigenschaft display: inline; auf 100% ein?

Answer 6

Hier ist was für mich gearbeitet. Beachten Sie, dass ich in einigen Fällen   zwischen Elementen verwenden musste, andernfalls fiel es in die nächste Zeile.

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

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

Answer 7

Dies ist in CSS nicht machbar, so weit wie Chrome betroffen ist. Der machbare Weg besteht darin, die size attribute der Formularsteuerung durch JavaScript zu manipulieren. Wenn die Länge der Zeichenfolge 25 ist, fügen Sie ein Extra von mindestens 10 für die Freigabe hinzu.

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> 

Eine weitere Option ist auch durch die Größe von einem Back-End-Skript pre-Berechnung.

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); ?>" />