如何用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>

现在所有内容都在左侧，其中第二个字段集（汽车信息）位于第一个字段集（个人信息）的正下方。

我希望汽车信息字段集位于个人信息字段集的右侧，以便它们并排。 使用CSS，我该如何做到这一点？

Answer 1

由于字段集被视为块，因此您需要使用

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

Or 任何您想要的字段集宽度。

Answer 2

您可以做的是将两个字段集浮动到左侧。 css 看起来像这样：

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

这将影响页面上的每个字段集，因此如果您只想隔离特定字段集，请使用 CSS 类：

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

<fieldset class="FloatLeft">

Answer 3

正如他们所说，但您也可以将汽车信息浮动到右侧，这使您的优势是无论宽度如何，都始终与该边缘齐平（如果这很重要）。

Answer 4

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

Answer 5

如果您为字段集指定宽度并将其向左浮动，则如下所示：

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