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

Question

我正在尝试实现以下布局，但在用HTML进行处理时遇到了麻烦，而且我不确定通常会采用哪种正确的方式（我会假设CSS是这种情况，但也许可以在纯HTML中进行处理更好/更简单）：

[-NameInput-] | ----------------------------------- textarea -------- ---------------------------]
[-PhoneInput-] | ----------------------------------- textarea -------- ---------------------------]
[提交]
[-EmailInput-] | ----------------------------------- textarea -------- ---------------------------]

其中[]括号代表一个按钮，而|则代表|。 | 代表一个文本区域。 到目前为止，我有点困惑，因为有些网站使用table标记来进行此类操作，而另一些网站则使用CSS进行块对齐。 有什么意见吗？

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

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

此表格在较宽的屏幕上对齐，然后在较小的屏幕上堆叠。 繁荣。 做完了