HTML/CSS 表单与按钮和文本区域对齐

Question

我正在尝试实现以下布局，但我在 HTML 中遇到了麻烦，而且我不确定通常实现它的正确方法是什么(我假设 CSS 是这种情况，但也许会这样做纯 HTML 更好/更简单):

[-NameInput-] |-----------------------------------textarea-----------------------------------]
[-PhoneInput-] |-----------------------------------textarea-----------------------------------]
[Submit]
[-EmailInput- ] |-----------------------------------textarea-----------------------------------]

其中 [ ] 括号代表一个按钮， | |代表一个文本区域。到目前为止，我有点困惑，因为有些网站使用 table 标签做这种事情，而其他网站使用 CSS 中的 block-align。对此有任何意见吗？

Answer 1

首先，如果您看到使用表格布置页面元素的源代码，请立即离开该站点。不要回去。它是一种史前恐龙，濒临灭绝。你不会想和它一起灭绝。

其次，使用 CSS 布置表单非常简单，而且对移动设备也很友好。

<form>
<div class="input-wrapper">
    <label for="name">Name:</label>
    <input id="name" type="text" placeholder="Name">
</div>
<div class="input-wrapper">
    <label for="phone">Phone:</label>
    <input id="phone" type="text" placeholder="Phone">
</div>
<div class="input-wrapper">
    <label for="email">Email:</label>
    <input id="email" type="email" placeholder="Email Address">
</div>

.input-wrapper {
    width:100%;
    clear:both;
    padding:1em 0;
}
label {
    display:inline-block;
    float:left;
    text-align:right;
    margin-right:1em;
}
input {
    display:block;
    float:left;
}

这是一个基本的 fiddle 。 https://jsfiddle.net/maguijo/j571a7j0/

此表单在较宽的屏幕上对齐，在较小的屏幕上堆叠。繁荣。完成。