Comment étirer le champ de saisie sur toute la largeur?

J'ai une forme simple HTML. Je voudrais les bons widgets dans la deuxième colonne /champ de texte, combox etc./ étiré et rempli la colonne entière.

Mon HTML Ressemble à ça:


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


Mon CSS Ressemble à ça:


.formTable {
border-color: black;
}

.formTable td {
padding: 10px;
}

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

.formTable .col2 {
width: 100%;
}


Des idées?
Invité:

Christine

Confirmation de:

Vous pouvez spécifier que tous les éléments enfants de la classe "col2" avoir une largeur 100%, En ajoutant ce qui suit:


.col2 * { width:100%;}


Voir mon exemple dabblet:
http://dabblet.com/gist/2227353

Catherine

Confirmation de:

Commencer par sémantique markup, Comme ce n'est pas des données tabulaires. De plus, nous n'avons pas besoin d'emballages supplémentaires avec des étiquettes ajoutées. DIVs, qui est plus propre.


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


Puis ajouter 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 Exemple:
http://jsfiddle.net/6EyGK/
/

Hannah

Confirmation de:

Vous pouvez utiliser:


.col2 * {
width: 100%;
}


Correspondre à tout descendant
.col2

. comme vous pouvez le voir
http://jsfiddle.net/darkajax/9W5M6/
. Ou:


.col2 > * {
width: 100%;
}


Correspondre uniquement aux enfants directs.

Alice

Confirmation de:

utilisant Twitter

Bootstrap

:
et l'entrée est à l'intérieur de la colonne

Juste ajouter k.
<input/>


class="container-fluid"

Blanche

Confirmation de:

Noter

Ce n'est pas une réponse, mais un commentaire inclut trop de code pour aller à la section des commentaires. Alors s'il vous plaît s'abstenir de m'étumer, non? :/

Autre sémantique markup En plus de la réponse à Matthew Darnell:

Si vous enveloppez les étiquettes autour des données d'entrée et de sélection, vous pouvez éviter d'utiliser des attributs.
for

et
id

.


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


Ou utiliser une liste de définitions pouvant vous donner un contrôle supplémentaire


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

</dd></dl>

Pour répondre aux questions, connectez-vous ou registre