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

他们说了什么，但你也可以正确地浮动汽车信息，这样你就可以在不考虑宽度的情况下始终与边缘齐平，如果这很重要的话。

Answer 3

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

Answer 4

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

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

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

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

<fieldset class="FloatLeft">

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

如何用css控制字段集的定位？

5 个答案: