table CSS - boîte d'entrée Développez la longueur sans emballage à la nouvelle ligne

Question

J'ai une forme avec des éléments structurés comme si:

<div> 
    <label>Name</label> 
    <input type="text" name="name" /> 
</div> 

<div> 
    <label>Address</label> 
    <input type="text" name="address" /> 
</div> 

La façon dont je veux regarder est, l'étiquette est placée à côté de la la zone de saisie et la zone de saisie se développent pour s'adapter à l'ensemble du conteneur. Si je définis une largeur manuelle dans la zone de saisie, en pixels, chaque boîte n'a pas la même longueur.

Si j'essaie de définir la largeur à 100%, les boîtes de saisie s'emboîtent dans une nouvelle ligne afin d'étendre toute la largeur.

Comment puis-je obtenir les étiquettes (dont la largeur est variable) à positionner à gauche des boîtes de saisie et faire en sorte que ces boîtes de saisie se développent en fonction de leur div contenant?

Voici mon CSS actuel:

#content form input 
{ 
    border: none; 
    height: 23px; 
    position: relative; 
    top: -1px; 
    left: -5px; 
    padding-top: 5px; 
    text-indent: 10px; 
    display: inline-block; 
} 

#content form label 
{ 
    background: #c6c9c0 url('../images/form-label-bg.jpg') no-repeat center right; 
    height: 28px; 
    line-height: 30px; 
    display: inline-block; 
    text-indent: 15px; 
    padding-right: 25px; 
    color: #6a6a6a; 
    text-transform: uppercase; 
    font-weight: bold; 
    font-size: 8pt; 
} 

Answer 1

Je ne pense pas que son possible, même en utilisant les tables parce que toutes les « colonnes » dans une table aussi avoir une largeur égale.

Vous devez définir manuellement les largeurs pour les entrées, je suppose. Utilisez% au lieu de px, cependant.

Answer 2

essayez ceci:

form div { 
    display: table; 
    width: 100%; 
} 
label, 
input { 
    display: table-cell; 
} 
label{ 
    width: 200px; 
} 
input { 
    width: 100%; 
}