如何用css控制fieldset的位置？

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> 

現在一切都在左側，其中第二字段（車廂信息），右側的第一個字段（個人信息）以下。

我希望汽車信息字段集位於個人信息字段集的右側，因此它們並排排列。使用CSS，我將如何做到這一點？

Answer 1

由於字段集被認爲是塊，你需要使用

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

或者任何你想要的字段集的寬度。

Answer 2

您可以做的是將兩個字段集浮動到左側。 CSS的應該是這樣的：

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

這將影響每個頁面上的字段集，所以如果你想只分離特定的字段集使用css classes：

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

<fieldset class="FloatLeft"> 

Answer 3

如果您分配一個寬度你的字段集和浮動到左側，這樣的事情：

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