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並設置適當的頂部和左側

也有其他的方式，但是這三者是適用於大多數情況下。