CSS 对齐水平标签和表单答案

【问题标题】：CSS to align horizontal label and formsCSS 对齐水平标签和表单
【发布时间】：2013-12-14 07:43:59
【问题描述】：

在我的 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>

对达到预期效果有什么建议吗？

【问题讨论】：

添加：float: left 到您的 CSS 中的 form。

标签： html css mako

【解决方案1】：

试试下面CSS

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

【讨论】：

【解决方案2】：

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 进行一些更改，您没有将它们全部关闭等等。

【讨论】：