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/

此表格在較寬的屏幕上對齊，然后在較小的屏幕上堆疊。 繁榮。 做完了