Как управлять позицией набора полей с помощью css?

Question

У меня есть следующий код:

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

Сейчас все находится на левой стороне, где второй FIELDSET (информация автомобиль) находится прямо под первой FIELDSET (персональной информации).

Я хотел бы, чтобы поле информации о машине было в правой части набора личных данных, так что они рядом. С помощью css, как бы я это сделал?

Answer 1

Поскольку fieldsets считаются блоки, вам необходимо использовать

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

Или все, что вам нужно для ширины полей.

Answer 2

Что вы можете сделать, это поплавок обоих полей влево. CSS будет выглядеть следующим образом:

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

Это будет влиять каждый Fieldset на странице, так что если вы хотите, чтобы изолировать только конкретные fieldsets использовать css classes:

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

<fieldset class="FloatLeft"> 

Answer 3

Если присвоить ширину к вашим fieldsets и плавать слева, что-то вроде этого:

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

Что они говорили, но вы также можете плавать право информации о машине, что дает вам преимущество всегда быть на одном уровне с этим краем независимо от ширины, если это важно.

Answer 5

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