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

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

也可以使用你的DIV进行一些更改，你没有全部关闭等等。

Answer 2

请尝试以下CSS

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

CSS用于对齐水平标签和表单

2 个答案: