如何将表单分成两栏？

Question

我有一个基本的表格，它将输入传递给一个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>

- captain yossarian

---

你可以发一下你尝试过的 CSS 吗？ - stackErr

请查看我的答案，启用了Bootstrap：http://stackoverflow.com/questions/35737985/form-design-with-bootstrap-align-text-boxes-and-text-areas/35738229#35738229。工作示例，请调整浏览器大小并查看结果：https://jsfiddle.net/L4LtoLsz/。 - Muhammed

如果其中一个答案对您有用，请选择其为最佳答案。 - symlink

Answer 1

将两个条目都包裹在一个带有相同类名的div中（例如“sub-entry”），并将它们左浮动，并设置宽度为50%。

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

.button {
    text-align: center;
    padding-top: 20px;
    clear: both;
}

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

请注意，我还给包含按钮的 div 添加了 class button，并将其样式设置为表单的中心。

- symlink

Answer 2

你可以尝试使用CSS flexbox。

form { display: flex; }

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

flexbox的好处：

1. 代码最小化，非常高效
2. 居中，无论是垂直还是水平，都很简单易懂
3. 等高列非常简单易懂
4. 多种选项可对齐flex元素
5. 它是响应式的
6. 与浮动和表格不同，它们的布局能力有限，因为它们从未被用于构建布局，Flexbox是一种现代（CSS3）技术，具有广泛的选项。

---

请注意，所有主流浏览器都支持flexbox，除了IE 8和9。一些较新的浏览器版本（如Safari 8和IE10）需要供应商前缀。如果您想快速添加所需的所有前缀，请使用Autoprefixer。有关更多浏览器兼容性详细信息，请参见此答案。

- Michael Benjamin