将输入元素和标签对齐到两个单独的列中

Question

现在可以使用表格轻松完成，但是，我想知道是否有合理的非表格方式来执行此操作。

我想要的是让标签在一侧，左侧从上到下的长度变化很大。并且输入元件通常在另一侧每行多个，但是所有输入元件在相同的左边缘对齐，其与所有标签相距约100px并且不基于标签的长度。

我可以使用表或css表...但是还有另一种方法。因为看起来不是一个好主意，尤其是更新和维护一个相关但分成单独的权限的结构。

我想这样，如果可以在不使用表/ css表的情况下进行此布局...但如果这是不切实际的，请告诉我。

Answer 1

轻松自在！

1. 使用<label>标记包裹您的标签和字段。
2. 使用<span>包装标签文字。
3. 使用<label>为display: block添加样式。
4. 使用宽度为<span>的{​​{1}}样式。

---

<强> HTML

display: inline-block

<强> CSS

<form>
    <label>
        <span>Name</span>
        <input type="text" />
    </label>
    <label>
        <span>Email</span>
        <input type="email" />
    </label>
    <label>
        <span>Password</span>
        <input type="password" />
    </label>
</form>

---

示例小提琴：http://jsfiddle.net/3aJyd/2/

Answer 2

您可以使用弹性显示轻松获得布局。

http://jsfiddle.net/s24Tx/

HTML

<div class="container">

<div class="left">

<div><label>Name</label></div>
<div><label>Address</label></div>
<div><label>Country</label></div>
<div><label>ZipCode</label></div>
<div><label>Amount of Contacts</label></div>
<div><label>Fav type of Color</label></div>
<div><label>Previous Choice of Color</label></div>
<div><label>Phone Number</label></div>
<div><label>Email Address</label></div>

</div>

<div class="right">

<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>
<div><input type="text"></div>

</div>

</div>

CSS

body{display: flex; justify-content:center;}
.container {
    display: flex;
}
.container > .right {
    flex-grow: 1;
}
.container > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0 10px;
}
.container > div.left {
    align-items: flex-end;
}
.left > div, .right > div {
    margin: 5px 0;
    height: 1.5em;
}
div.right > div:nth-child(3n-1) input {
    width: 50%;
}
input{border:1px solid;font-size: inherit;}