Formatieren Sie das Eingabeelement, um die verbleibende Breite des Containers zu füllen

Angenommen, ich habe ein HTML-Snippet wie dieses:

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

Dies ist nicht mein genauer Code, aber das Wichtigste ist, dass in einem Container mit fester Breite eine Beschriftung und eine Texteingabe in derselben Zeile vorhanden sind. Wie kann ich die Eingabe so gestalten, dass sie die verbleibende Breite des Behälters ausfüllt, ohne sie einzuwickeln und ohne die Größe des Etiketts zu kennen?

So sehr jeder Tabellen für das Layout hasst, helfen sie bei solchen Dingen, entweder mit expliziten Tabellen-Tags oder mit 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>

Hier ist eine einfache und saubere Lösung ohne Verwendung von JavaScript- oder Tabellenlayout-Hacks. Es ähnelt dieser Antwort: Geben Sie Text automatisch ein, indem Sie die Breite 100% mit anderen schwebenden Elementen füllen

Es ist wichtig, das Eingabefeld mit einer Spanne zu versehen display:block. Als nächstes muss die Schaltfläche an erster Stelle stehen und das Eingabefeld an zweiter Stelle.

Dann können Sie die Schaltfläche nach rechts bewegen und das Eingabefeld füllt den verbleibenden Raum aus.

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

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

Eine einfache Geige: http://jsfiddle.net/v7YTT/90/

Update 1: Wenn Ihre Website nur auf moderne Browser ausgerichtet ist, empfehle ich die Verwendung flexibler Boxen . Hier sehen Sie die aktuelle Unterstützung .

Update 2: Dies funktioniert sogar mit mehreren Schaltflächen oder anderen Elementen, die mit dem Eingabefeld vollständig geteilt werden. Hier ist ein Beispiel .

Ich schlage vor, Flexbox zu verwenden:

Stellen Sie jedoch sicher, dass Sie die richtigen Herstellerpräfixe hinzufügen!

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>

Bitte benutzen Sie dazu die Flexbox. Sie haben einen Container, der seine Kinder in eine Reihe biegt. Das erste Kind nimmt seinen Platz nach Bedarf ein. Der zweite biegt sich, um den gesamten verbleibenden Platz einzunehmen:

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

Der einfachste Weg, dies zu erreichen, wäre:

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>

Sieht aus wie: http://jsfiddle.net/JwfRX/

Sehr einfacher Trick ist die Verwendung einer CSS calcFormel. Alle modernen Browser, IE9, eine breite Palette von mobilen Browsern sollten dies unterstützen.

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

Sie können dies versuchen:

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>

Wenn Sie Bootstrap 4 verwenden:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

Besser noch, verwenden Sie das, was in Bootstrap integriert ist:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/