CSS來對齊水平標籤和表格

Question

在我的Mako模板中，我顯示了一個現有的「選項」列表，併爲每個人提供了5個帶有提交按鈕的表單。目前，他們正在顯示如下：

..... 
Option_i 
    Buton_i_1 
    Buton_i_2 
    Buton_i_3 
    Buton_i_4 
    Buton_i_5 
..... 

我想有hoorizo​​ntally的安排，這樣

..... 
Option_i Buton_i_1 Buton_i_1 Buton_i_1 Buton_i_1** 
..... 

我當前的HTML代碼來生成一個「選項」看起來是這樣的：

<div> 
    <div> 
     <label class="header_option" >OPTION</label> 
    </div> 

<div> 
    <form name="input" action="action_1" method="get"> 
     <input type="submit" value="Submit"> 
    </form> 

    <form name="input" action="action_2" method="get"> 
     <input type="submit" value="Submit"> 
    </form> 
................. 
    <form name="input" action="action_5" method="get"> 
     <input type="submit" value="Submit"> 
    </form> 
<div> 

任何建議達到預期的效果？

Answer 1

HTML

<div> 
     <label class="header_option" >OPTION</label> 
    </div> 
    <div> 
     <form name="input" action="action_1" method="get"> 
      <input type="submit" value="Submit"> 
     </form> 
     <form name="input" action="action_2" method="get"> 
      <input type="submit" value="Submit"> 
     </form> 
     <form name="input" action="action_3" method="get"> 
      <input type="submit" value="Submit"> 
     </form> 
     <form name="input" action="action_4" method="get"> 
      <input type="submit" value="Submit"> 
     </form> 
     <form name="input" action="action_5" method="get"> 
      <input type="submit" value="Submit"> 
     </form> 
    </div> 

CSS

div { 
    float: left; 
} 
form { 
    float: left; 
} 

DEMO：http://jsfiddle.net/eBu29/

還對你的DIV做了一些改變，你沒有關閉它們等等等等。

Answer 2

試試下面CSS

form 
{ 
    float: left; 
    width: auto; 
} 
div 
{ 
    float: left; 
    width: auto; 
}