html - 两列表格

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+，你也可以使用 column-count:

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

ul li label {
    display: block;
}