FIELDSET同一行

Question

我有2个字段集：

<fieldset> first fildset </fieldset> 

<fieldset> second fieldset </fieldset> 

我怎样才能将它们放置在同一行？

Answer 1

将它们装入的div容器。

<style type="text/css"> 
    .container { 
    height:100px; 
    width:600px; 
    background-color:gray;  
} 
.left { 
    float:left; 
    width:200px; 
    background-color:blue; 
} 
.right { 
    float:right; 
    width:400px; 
    background-color:red; 
} 
</style> 

<div class="container"> 
    <div class="right"><fieldset> first fildset </fieldset></div> 
    <div class="left"><fieldset> second fieldset </fieldset></div> 
</div> 

Answer 2

将它们装入table。至于

<table> 
    <tr> 
    <td> 
     <fieldset> 
      first fildset 
     </fieldset> 
    </td> 
    <td> 
     <fieldset> 
      second fieldset 
     </fieldset> 
    </td> 
</table> 

FIDDLE在这里

Answer 3

你也可以使用display:inline;

Answer 4

您可以自己display CSS属性设置为inline：

<style type="text/css"> 
    fieldset.inline { 
    display: inline; 
    } 
</style> 

<fieldset class="inline"> first fildset </fieldset> 
<fieldset class="inline"> second fieldset </fieldset> 

下面是结果的外观：http://jsbin.com/aseyej/1/edit

Answer 5

feldset是一个块级元素因此一般的情况会出现在页面布局两个街区那么把它们放在一个线还有比如，你可以很多可能性：

a。将display: inline-block放在字段集的样式表中。

湾将字段集中的一个浮动到另一个的左侧或右侧，即。 float: left

℃。使他们绝对或相对定位即。 position: absolute并设置适当的顶部和左侧

也有其他的方式，但是这三者是适用于大多数情况下。