Jak rozciągnąć pole wprowadzania do pełnej szerokości?

Question

Mam prosty formularz HTML. Chciałbym, aby odpowiednie widżety w drugiej kolumnie (pole tekstowe, combox itd.) Rozciągały się i wypełniały całą kolumnę.

Moje HTML wygląda następująco:

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

Moje CSS wygląda następująco:

.formTable { 
    border-color: black; 
} 

.formTable td { 
    padding: 10px; 
} 

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

.formTable .col2 { 
    width: 100%; 
} 

jakieś pomysły?

Answer 1

Można określić, że wszystkie dzieci z klasy „col2” mają szerokość 100%, dodając następujący:

.col2 * { width:100%;} 

Zobacz moją dabblet przykład: http://dabblet.com/gist/2227353

Answer 2

Można użyć:

.col2 * { 
    width: 100%; 
} 

pasują do każdej .col2 potomka. jak widać here. Lub:

.col2 > * { 
    width: 100%; 
} 

Aby dopasować tylko najbliższe dzieci.

Answer 3

Start z semantycznych znaczników od to nie są dane tabelaryczne. Ponadto, z dodanymi etykietami, nie potrzebujemy dodatkowych opakowań DIV, które są czystsze.

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

Następnie dodać CSS:

.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; 
} 

JS Fiddle Przykład: http://jsfiddle.net/6EyGK/

Answer 4

Inne semantycznych znaczników dodatkowo do Matthew Darnells odpowiedź:

Jeśli owinąć etykiety wokół wejść i wybiera, można uniknąć używania atrybutów for i id.

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

Albo skorzystać z listy definicji, która może dać dodatkową kontrolę

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

Answer 5

jeśli używasz Twitter Bootstrap: i wejście jest wewnątrz kolumny

wystarczy dodać do <input>class="container-fluid"