Comment étirer le champ d'entrée à pleine largeur?

J'ai un formulaire HTML simple. J'aimerais le droit des widgets dans la deuxième colonne (champ de texte, combox, et ainsi de suite) afin d'étirer et de remplir l'ensemble de la colonne.

Mon code HTML ressemble à ceci:

<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 à ceci:

.formTable {
  border-color: black;
}

.formTable td {
  padding: 10px;
}

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

.formTable .col2 {
  width: 100%;
}

Des idées?

source d'informationauteur Robert Hume

  1. 19

    Vous pouvez spécifier que tous les enfants de la classe "col2" ont une largeur de 100% par adjonction de ce qui suit:

    .col2 * { width:100%;}

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

  2. 8

    Commencer avec un balisage sémantique, puisque ce n'est pas des données tabulaires. Aussi, avec l'ajout d'étiquettes, nous n'avons pas besoin d'adaptateur supplémentaire 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 le 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/

  3. 5

    Vous pouvez utiliser:

    .col2 * {
    width: 100%;
}

    Pour correspondre à n'importe .col2 descendant. comme vous pouvez le voir ici. Ou:

    .col2 > * {
    width: 100%;
}

    Pour les enfants immédiats.

  4. 3

    si l'utilisation de Twitter Bootstrap:
    et l'entrée est à l'intérieur d'une colonne

    vient de s'ajouter à <input> la class="container-fluid"

  5. 1

    Autres balisage sémantique additionaly Matthieu Darnells réponse:

    Si vous enchaînez les labels sur les entrées et les sélectionne, vous pouvez éviter d'utiliser le foret id attributs.

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

    Ou l'utilisation d'une liste de définition de ce qui pourrait 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>
    </dt>
</dl>