Html 有两列的表格

您好，正如标题所述，我想创建一个包含两列的表单。最后，我希望它看起来像这样，但是通过查看代码，我不认为这是正确的方法，如果我错了，请纠正我

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

以下是我目前在JSFIDLE中的代码：

HTML

---

实现这一点的方法有很多。我喜欢使用列表（）：

HTML

顺便说一下，我用了49%，因为在一些浏览器上，事情搞砸了。理想情况下，你会想要50%

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

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

ul li label {
    display: block;
}

---

这是最新的提琴：

上一个答案使用显示：内联块；但另一种方法是使用浮动列

HTML:

用于引导

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

这里有文字
这里有文字
...

table/水平列表/等宽浮动divs/选择您的喜好谢谢这就是我要找的谢谢。当它允许我回答时，我会把它标记为答案

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

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

ul li > * {
    width: 100%;
}

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

ul li label {
    display: block;
}

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

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

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