2

我有以下代码： 

<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，我该怎么做？

4

5 回答 5

4

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

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

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

于 2009-07-29T14:49:23.627 回答
2

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

于 2009-07-29T15:05:09.590 回答
2 
fieldset {
  -moz-border-radius:5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 200px;
  float: left;    
}
于 2011-02-03T07:09:58.160 回答
1

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

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

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

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

<fieldset class="FloatLeft">
于 2009-07-29T14:49:05.890 回答
1

如果您为字段集分配宽度并将其浮动到左侧，则如下所示：

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;
}
于 2009-07-29T14:51:04.450 回答