Wie kontrolliere ich die Positionierung eines Fieldsets mit CSS?

Question

Ich habe den folgenden Code:

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

Gerade jetzt alles auf der linken Seite ist, wo die zweite Fieldset (Auto Informationen) befindet sich direkt unterhalb der ersten Fieldset (Daten).

Ich möchte, dass das Auto Information Fieldset auf der rechten Seite des Felds für persönliche Informationen ist, so dass sie nebeneinander sind. Mit css, wie würde ich das tun?

Answer 1

Da Fieldset werden als Blöcke, Sie müssen verwenden

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

Oder was auch immer Sie für die Breite der Fieldsets wollen.

Answer 2

Sie können beide Feldgruppen nach links schweben lassen. Die CSS würde wie folgt aussehen:

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

Das wird jede Fieldset auf der Seite zu bewirken, so dass, wenn Sie nur bestimmte Fieldset css classes verwenden isolieren möchten:

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

<fieldset class="FloatLeft"> 

Answer 3

Wenn Sie eine Breite zu Ihrem Fieldset zuweisen und schweben die auf der linken Seite, etwa so:

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

Was sagten sie, aber Sie können auch die Autoinformation rechts schweben, was Ihnen den Vorteil gibt, immer bündig gegen diese Kante zu sein, egal welche Breite, wenn das wichtig ist.

Answer 5

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