如何将表单拆分为两列?

时间:2016-03-02 03:39:39

标签: html css forms html-form

我有一个将输入传递给PHP脚本的基本表单。我想拆分表格,以便第二个子条目(人员2)位于第一个(人员1)右侧的一列中,而不是直接位于下面。

<link rel="stylesheet" href="test.css">    
    <form class="form-validation" method="post" action="script.php">
       <link rel="stylesheet" href="test.css">
       <h2>Person 1:</h2>
       <br>
       <div class="form-row form-input-name-row">
          <label>
          <span>Name</span>
          <input name="field1" type="text">
          </label>
       </div>
       <div class="form-row form-input-name-row">
          <label>
          <span>Age</span>
          <input name="field2" type="text">
          </label>
       </div>
       <div class="main-content">
          <h2>Person 2:</h2>
          <br>
          <div class="form-row form-input-name-row">
             <label>
             <span>Name</span>
             <input name="field3" type="text">
             </label>
          </div>
          <div class="form-row form-input-name-row">
             <label>
             <span>Age</span>
             <input name="field4" type="text">
             </label>
          </div>
    </form>
    <div>
    <button name="submit">Submit form</button>
    </div>
    </div>

2 个答案:

答案 0 :(得分:2)

将两个条目包装在具有相同类别的div中(例如&#34;子条目&#34;)并将它们向左浮动,宽度为50%:

&#13;
&#13;
.sub-entry {
    width: 50%;
    float: left;
}

.button {
    text-align: center;
    padding-top: 20px;
    clear: both;
}
&#13;
<form class="form-validation" method="post" action="script.php">
    <link rel="stylesheet" href="test.css">
    <div class="sub-entry">
        <h2>Person 1:</h2>
        <br>
        <div class="form-row form-input-name-row">
            <label>
                <span>Name</span>
                <input name="field1" type="text">
            </label>
        </div>
        <div class="form-row form-input-name-row">
            <label>
                <span>Age</span>
                <input name="field2" type="text">
            </label>
        </div>
    </div>
    <div class="sub-entry">
        <div class="main-content">
            <h2>Person 2:</h2>
            <br>
            <div class="form-row form-input-name-row">
                <label>
                    <span>Name</span>
                    <input name="field3" type="text">
                </label>
            </div>
            <div class="form-row form-input-name-row">
                <label>
                    <span>Age</span>
                    <input name="field4" type="text">
                </label>
            </div>
        </div>
    </div>
</form>
<div class="button">
    <button name="submit">Submit both forms</button>
</div>
&#13;
&#13;
&#13;

注意我还给包含按钮的div一个类按钮,并将其设置为表单的中心。

答案 1 :(得分:2)

您可以尝试使用CSS flexbox

&#13;
&#13;
form { display: flex; }
&#13;
<form class="form-validation" method="post" action="script.php">

  <div class="person-1">
    <h2>Person 1:</h2>
    <div class="form-row form-input-name-row">
      <label>
        <span>Name</span>
        <input name="field1" type="text">
      </label>
    </div>
    <div class="form-row form-input-name-row">
      <label>
        <span>Age</span>
        <input name="field2" type="text">
      </label>
    </div>
  </div><!-- end .person-1 -->
  
  <div class="main-content person-2">
    <h2>Person 2:</h2>
    <div class="form-row form-input-name-row">
      <label>
        <span>Name</span>
        <input name="field3" type="text">
      </label>
    </div>
    <div class="form-row form-input-name-row">
      <label>
        <span>Age</span>
        <input name="field4" type="text">
      </label>
    </div>
  </div><!-- end .person-2 -->
  
</form>

<div><button name="submit">Submit form</button></div>
&#13;
&#13;
&#13;

flexbox的好处:

  1. 最小代码;效率很高
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. 它的响应
  6. 与花车和桌子不同,浮动和桌面提供有限的布局容量,因为它们从未用于建筑布局,因此flexbox是一种现代(CSS3)技术,具有广泛的选项。
  7. 请注意,所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本,例如Safari 8和IE10,需要vendor prefixes。要快速添加所需的所有前缀,请使用Autoprefixerthis answer中的更多浏览器兼容性详细信息。