按鈕和文本區域的HTML/CSS表單對齊

我試圖實現以下佈局，但是我在HTML中執行時遇到了問題，我不確定實現此目的的正確方法通常是什麼（我會假設CSS是這種情況，但也許這樣做在純HTML中是更好/更簡單）：按鈕和文本區域的HTML/CSS表單對齊

[-NameInput-] | ------------------- ---------------- textarea的--------------------------------- - ]
[-PhoneInput-] | ----------------------------------- textarea --- --------------------------------]
[提交]
[-EmailInput-] | ---- ------------------------------- textare a -----------------------------------]

其中括號代表按鈕和| |代表一個文本區域。到目前爲止，我有點困惑，因爲有些網站正在使用table標籤來做這種事情，而另一些則使用CSS中的block-align。對此有何意見？

來源

2015-05-11 patoupatou

通常，我使用塊 - 我認爲這是更現代的方式:) – AleshaOleg

你不應該使用表來對齊元素。 – IvanJ

也許開始一個小提琴..這不是很清楚。你也可以看看一些現代的想法框架。 http://getbootstrap.com/css/#forms或http://foundation.zurb.com/docs/components/forms.html –

首先，如果您看到使用表格來佈置頁面元素的源代碼，請立即離開該網站。不要回去。這是一隻史前恐龍，瀕臨滅絕。你不會想要消失。其次，使用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/

這種形式在更寬的屏幕上對齊，並堆疊在較小的屏幕上。繁榮。完成。

來源

2015-05-11 20:15:09 maguijo

按鈕和文本區域的HTML/CSS表單對齊

回答

相關問題