Porównaj ceny domen i usług IT, sprzedawców z całego świata

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


Mam prosty formularz HTML. Chciałbym, aby prawidłowe widżety w drugiej kolumnie (pole tekstowe, komboks, itp.) Rozciągnęły się i wypełniły całą kolumnę.
Mój kod 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>

Mój CSS wygląda tak:
.formTable {
border-color: black;
}.formTable td {
padding: 10px;
}.formTable .col1 {
text-align: right;
}.formTable .col2 {
width: 100%;
}

Jakieś pomysły?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz określić, że wszystkie elementy podrzędne klasy „col2” mają 100% szerokości, dodając:
.col2 * { width:100%;}

Zobacz mój przykład dabbleta:

http://dabblet.com/gist/2227353
http://dabblet.com/gist/2227353
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Zacznij od znaczników semantycznych, ponieważ nie są to dane tabelaryczne. Ponadto, po dodaniu etykiet, nie potrzebujemy dodatkowego opakowania DIV, które jest czystsze.
<ul class="formList">
[*]
<label for="input_1">
Report Number
</label>
<input id="input_1" name="input_1" type="text"/>
[/*]
[*]
<label for="input_2">
Report Type
</label>
<select id="input_2" name="input_2"></select>
[/*]
[/list]

Następnie dodaj 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;
}

Przykład JS Fiddle:

http://jsfiddle.net/6EyGK
http://jsfiddle.net/6EyGK/
/
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz użyć:
.col2 * {
width: 100%;
}

Aby dopasować dowolny element podrzędny
.col2
. jak widzisz

tutaj
http://jsfiddle.net/darkajax/9W5M6/... Lub:
.col2 > * {
width: 100%;
}

Aby dopasować tylko najbliższe dzieci.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

podczas korzystania z Twittera

Bootstrap

:
a wejście znajduje się wewnątrz kolumny
po prostu dodaj do
& < input & >
class = "container-fluid"
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:


Uwaga
>
To nie jest odpowiedź, ale komentarz, który zawiera zbyt dużo kodu, aby przejść do sekcji komentarzy. Więc proszę, nie poniżaj mnie, dobrze? :)
Inne dodatki znaczników semantycznych do odpowiedzi Matthew Darnella:
Jeśli zawiniesz etykiety wokół wejścia i zaznaczenia, możesz uniknąć używania atrybutów
for
i
id
.
<ul class="formList">
[*]
<label>
Report Number
<input name="input_1" type="text"/>
</label>
[/*]
[*]
<label>
Report Type
<select name="input_2"></select>
</label>
[/*]
[/list]

Lub użyj listy definicji, która da ci 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>

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się