Comment contrôler la postioning d'un fieldset avec css?

Question

J'ai le code suivant:

<fieldset> 
    <legend> 
     <strong>Personal Information</strong> 
    </legend> 
    <ul> 
     <li> 
      <label for="first_name">First Name</label><br /> 
      <input type="text" id="first_name" name="first_name" value="" maxlength="30" /> 
     </li> 
     ... 
    </ul> 
</fieldset> 
<fieldset> 
    <legend> 
     <strong>Car Information</strong> 
    </legend> 
    <ul> 
     <li> 
      <label for="car_make">Make</label><br /> 
      <input type="text" id="car_make" name="car_make" value="" maxlength="30" /> 
     </li> 
     ... 
    </ul> 
</fieldset> 

En ce moment, tout est sur le côté gauche où la deuxième fieldset (informations de voiture) est juste en dessous du premier fieldset (renseignements personnels).

Je souhaite que le jeu de champs d'information de voiture soit sur le côté droit du jeu de champs d'informations personnelles afin qu'ils soient côte à côte. En utilisant css, comment ferais-je cela?

Answer 1

Depuis fieldsets sont considérés comme des blocs, vous devez utiliser

fieldset { 
    width: 200px; 
    float: left; 
} 

Ou tout ce que vous voulez pour la largeur des ensembles de champs.

Answer 2

Ce que vous pouvez faire est de faire flotter les deux fieldsets vers la gauche. Le css ressemblerait à ceci:

fieldset { 
    float: left; 
    width: 200px; 
} 

Cela va effectuer tous les fieldset sur la page, donc si vous voulez isoler seulement fieldsets spécifiques utilisent css classes:

<style> 
    .FloatLeft { float: left; width: 200px;} 
</style> 

<fieldset class="FloatLeft"> 

Answer 3

Si vous attribuez une largeur à vos fieldsets et laisser flotter le vers la gauche, quelque chose comme ceci:

HTML:

<fieldset class="myFieldSet"> 
    <legend> 
     <strong>Personal Information</strong> 
    </legend> 
    <ul> 
     <li> 
      <label for="first_name">First Name</label><br /> 
      <input type="text" id="first_name" name="first_name" value="" maxlength="30" /> 
     </li> 
     ... 
    </ul> 
</fieldset> 
<fieldset class="myFieldSet"> 
    <legend> 
     <strong>Car Information</strong> 
    </legend> 
    <ul> 
     <li> 
      <label for="car_make">Make</label><br /> 
      <input type="text" id="car_make" name="car_make" value="" maxlength="30" /> 
     </li> 
     ... 
    </ul> 
</fieldset> 

CSS:

.myFieldSet 
{ 
width:300px; 
float:left; 
} 

Answer 4

Ce qu'ils ont dit, mais vous pouvez également faire flotter les informations de la voiture à droite, ce qui vous donne l'avantage de toujours affleurer ce bord, peu importe la largeur, si c'est important.

Answer 5

fieldset { 
    -moz-border-radius:5px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    width: 200px; 
    float: left;  
}