html - CSS对齐水平标签和表单

Question

在我的 Mako 模板中，我显示了现有“选项”的列表，对于每个选项，我都有 5 个带有提交按钮的表单。它们当前显示如下:

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

我想水平排列，像这样

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

演示:http://jsfiddle.net/eBu29/

同时对您的 DIV 进行一些更改，您没有将它们全部关闭等等。