Question

您好，标题声明我想创建一个包含2列的表单。最后我希望它看起来像jsfiddle I've been playing with.但是通过查看代码我不相信这是正确的方法，如果我错了，请纠正我。

代码是一个标准的MVC ViewModel，用于创建数据库的条目。

这是我目前在jsfiddle中的代码：

HTML

<label for="IDofInput">text goes here</label> <label for="IDofInput">text goes here</label> <br />
<input type="text" id="IDofInput" /> <input type="text" id="IDofInput" />
</p>

CSS

label {width: 140px; padding-right: 20px; display: inline-block }

Answer 1

有很多方法可以实现这一目标。我喜欢使用列表（jsFiddle）：

HTML

<ul>
    <li>
        <label>Label 1</label>
        <input type="text" />
    </li>
     <li>
        <label>Label 2</label>
        <input type="text" />
    </li>
     <li>
        <label>Label 3</label>
        <input type="text" />
    </li>
     <li>
        <label>Label 4</label>
        <input type="text" />
    </li>
</ul>

CSS：

ul {
    width: 100%;
}
ul li {
    width: 49%;
    display: inline-block;
}

ul li > * {
    width: 100%;
}

顺便说一句，我使用了49％，因为在某些浏览器上，事情搞得一团糟。理想情况下，你需要50％。

[编辑] 现在，如果您只想支持IE10 +，您也可以使用列计数：

ul {
    column-count:2;
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
}

ul li label {
    display: block;
}

Answer 2

这是一个更新的小提琴：http://jsfiddle.net/L5NUH/2/

上一个答案使用display：inline-block;但另一种方法是使用浮动列。

HTML：

<div class="row">
    <div class="col">
        <label for="IDofInput">text goes here</label> 
        <input type="text" id="IDofInput" /> 
    </div>
    <div class="col">
        <label for="IDofInput">text goes here</label> 
        <input type="text" id="IDofInput" />
    </div>
</div>

CSS：

.row {
    background: #f6f6f6;
    border: 1px solid #ccc;
    overflow: hidden;
    padding: 10px;
}
.col {
    float: left;
    width: 50%
}

Answer 3

对于Bootstrap

<form>
  <div class="row">
    <div class="col-md-6">
      <label for="IDofInput">text goes here</label> 
      <input type="text" id="IDofInput" />
    </div>
    <div class="col-md-6">
      <label for="IDofInput2">text goes here</label> 
      <input type="text" id="IDofInput2" />
      ...
    </div>
  </div>
</form>

表格有两列

3 个答案: