Wie dehnt man das Eingabefeld auf volle Breite?

Ich habe ein einfaches HTML-Formular. Ich möchte, dass die richtigen Widgets in der zweiten Spalte (Textfeld, Combox usw.) die gesamte Spalte strecken und ausfüllen.

Mein HTML sieht so aus:

<table class="formTable">
  <tr>
    <td class="col1">Report Number</td>
    <td class="col2"><input type="text"/></td>
  </tr>
  <tr>
    <td class="col1">Report Type</td>
    <td class="col2"><select></select></td>
  </tr>
</table>

Mein CSS sieht so aus:

.formTable {
  border-color: black;
}

.formTable td {
  padding: 10px;
}

.formTable .col1 {
  text-align: right;
}

.formTable .col2 {
  width: 100%;
}

Irgendwelche Ideen?

Sie können angeben, dass alle untergeordneten Elemente der Klasse “col2” eine Breite von 100 % haben, indem Sie Folgendes hinzufügen:

.col2 * { width:100%;}

Siehe mein Dabblet-Beispiel: http://dabblet.com/gist/2227353

Beginnen Sie mit semantischem Markup, da es sich nicht um tabellarische Daten handelt. Außerdem benötigen wir mit hinzugefügten Labels keine zusätzlichen Wrapper-DIVs, was sauberer ist.

<ul class="formList">
    <li>
        <label for="input_1">
            Report Number
        </label>
        <input id="input_1" name="input_1" type="text" />
    </li>
    <li>
        <label for="input_2">
            Report Type
        </label>
        <select id="input_2" name="input_2"></select>
    </li>
</ul>

Fügen Sie dann das CSS hinzu:

.formList {
    border:1px solid #000;
    padding:10px;
    margin:10px;
}
label {
    width:200px;
    margin-left:-200px;
    float:left;
}
input, select {
    width:100%;
}
li {
    padding-left:200px;
}

Beispiel für JS-Geige: http://jsfiddle.net/6EyGK/

Sie können Folgendes verwenden:

.col2 * {
    width: 100%;
}

Passend zu jedem .col2 Nachfahre. wie du sehen kannst hier. Oder:

.col2 > * {
    width: 100%;
}

Um nur die unmittelbaren Kinder abzugleichen.

wenn Sie Twitter verwenden Bootstrap: und die Eingabe befindet sich in einer Spalte

einfach ergänzen <input> das class="container-fluid"

Notiz

Dies ist keine Antwort, sondern ein Kommentar, der zu viel Code enthält, um in den Kommentarbereich zu gehen. Also unterlassen Sie es bitte, mich abzuwerten, ja? 🙂

Anderes semantisches Markup zusätzlich zu Matthew Darnells Antwort:

Wenn Sie die Beschriftungen um die Eingaben und Auswahlen wickeln, können Sie die Verwendung von vermeiden forund id Attribute.

<ul class="formList">
    <li>
        <label>
            Report Number
        <input name="input_1" type="text" />
        </label>
    </li>
    <li>
        <label>
            Report Type
        <select name="input_2"></select>
        </label>
    </li>
</ul>

Oder verwenden Sie eine Definitionsliste, die Ihnen zusätzliche Kontrolle gibt

<dl class="formList">
    <dt>
        <label for="input_1">
            Report Number
        </label>
    </dt>
    <dd>
        <input id="input_1" name="input_1" type="text" />
    </dd>
    <dt>
        <label for="input_2">
            Report Type
        </label>
    </dt>
    <dd>
        <select id="input_2" name="input_2"></select>
    </dt>
</dl>