Comment faire une bordure avec css autour de certains éléments sans spécifier une largeur absolue?

Question

Je suis nouveau css et voudrait dessiner une bordure autour de cette:

<form name="SomeForm" method="post" action="SomeAction"> 
    <fieldset> 
    <legend>Details</legend> 
    <div class="menu"> 
     <p><label for="UserName">Username</label><input name="UserName" id="UserName" type="text" value="#data[1].username#"></p> 
     <p><label for="Password">Password</label><input name="Password" id="Password" type="password" value="#data[1].password#"></p> 
     <p><label for="FirstName">First name</label><input name="FirstName" id="FirstName" type="text" value="#data[1].firstname#"></p> 
     <p><label for="LastName">Last name</label><input name="LastName" id="LastName" type="text" value="#data[1].lastname#"></p> 
    </div> 
    </fieldset> 
</form> 

Ceci est mon css

fieldset { 
    background-color: #e1e1e1; 
    border: 1px solid #808080; 
} 

legend { 
    background-color: #e1e1e1; 
    border: 1px solid #808080; 
    border-left-width; 50%; 
    color: #0667ad; 
    font-style: italic; 
    font-weight: bold; 
} 

div.menu { 
    border: 1px solid #808080; 
    padding: 1px; 
    width: 271px; 
} 

p { 
    margin: 1px; 
} 

label { 
    border: 1px solid #e1e1e1; 
    background-color: #84b0d4; 
    color: #ffffff; 
    display: block; 
    float: left; 
    margin-right: 1px; 
    padding: 1px; 
    text-align: right; 
    width: 8em; 
} 

input { 
    background: #ffffff; 
    border: 1px solid #e1e1e1; 
} 

En ce moment j'ai défini la largeur de div comme 271px. Y at-il un moyen d'envelopper la bordure autour des éléments qu'elle contient sans spécifier une largeur absolue?

Answer 1

Retirez float: left de vos étiquettes, ajouter float: left à votre div.menu et retirez-la de votre width: 271px div.menu.

La raison pour laquelle il se déconnecte maintenant lorsque vous supprimez la largeur de div.menu est parce que les étiquettes sont flottantes à gauche et ne pas effacer l'entrée au-dessus d'eux.

Edit: Une autre option si vous voulez laisser les étiquettes flottaient gauche serait d'ajouter une règle de compensation aux paragraphes du menu:

div.menu p { clear: both; } 

Answer 2

div.menu { 
    border: 1px solid #808080; 
    padding: 1px; 
    float: left; 
} 

et

<div class="menu"> 
    <p><label for="UserName">Username</label><input name="UserName" id="UserName" type="text" value="#data[1].username#"></p> 
    <p><label for="Password">Password</label><input name="Password" id="Password" type="password" value="#data[1].password#"></p> 
    <p><label for="FirstName">First name</label><input name="FirstName" id="FirstName" type="text" value="#data[1].firstname#"></p> 
    <p><label for="LastName">Last name</label><input name="LastName" id="LastName" type="text" value="#data[1].lastname#"></p> 
</div> 
<div style="clear: both;"></div>