Html 如何使用 css 控制字段集的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1200785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to control the postioning of a fieldset with css?
提问by Holly
I have the following code:
我有以下代码：
<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>
Right now everything is on the left hand side where the second fieldset (car information) is right below the first fieldset (personal information).
现在一切都在左侧，其中第二个字段集（汽车信息）在第一个字段集（个人信息）的正下方。
I would like the car information fieldset to be on the right hand side of the personal information fieldset so they are side by side. Using css, how would I do this?
我希望汽车信息字段集位于个人信息字段集的右侧，以便它们并排。使用 css，我该怎么做？
回答by Zack Marrapese
Since fieldsets are considered blocks, you need to use
由于字段集被视为块，因此您需要使用
fieldset {
width: 200px;
float: left;
}
Or whatever you want for the width of the fieldsets.
或者任何你想要的字段集宽度。
回答by John Dunagan
What they said, but you can also float the car information right, which gives you the advantage of always being flush against that edge no matter the width, if that's important.
他们说的是什么，但您也可以将汽车信息正确浮动，这使您可以始终与该边缘齐平，无论宽度如何，如果这很重要。
回答by Abhilash Joseph C
fieldset {
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
width: 200px;
float: left;
}
回答by Gavin Miller
What you can do is float both fieldsets to the left. The css would look like this:
您可以做的是将两个字段集都向左浮动。css 看起来像这样：
fieldset {
float: left;
width: 200px;
}
This is going to effect every fieldset on the page, so if you want to isolate only specific fieldsets use css classes:
这将影响页面上的每个字段集，因此如果您只想隔离特定的字段集，请使用css 类：
<style>
.FloatLeft { float: left; width: 200px;}
</style>
<fieldset class="FloatLeft">
回答by Charlie
If you assign a width to your fieldsets and float the to the left, something like this:
如果您为字段集分配宽度并将其向左浮动，则如下所示：
HTML:
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:
CSS：
.myFieldSet
{
width:300px;
float:left;
}
