2016-07-26 112 views
0

我正在嘗試創建一個註冊表單,並且遇到了一個問題。 jsfiddlehere 輸出如下圖所示enter image description here 如圖中所示,我希望地址位於行的頂部,如圖所示,而不使用相對或絕對的樣式位置。有沒有可能用margin或padding來解決這個問題。另一件事是爲什麼地址文本出現在底部,默認情況下不在頂部?是因爲textarea嗎? 在此先感謝html表單佈局

+0

CSS #address跨度{ vertical-align:top; } –

+0

我也想知道如何在父div(height:100px)頂部,中間或底部安排一個di​​v div(height:10px)。我們是否可以使用這種垂直對齊方式將其排出或垂直對齊僅適用於文本? –

回答

1

要對齊verticaly 2 inline-block的元素,你可以使用vertical-align。 你的情況:

.container span { 
    padding-left: 40px; 
    display: inline-block; 
    width: 30%; 

    /* Add vertical alignment */ 
    vertical-align: top; 
} 

這裏是一個fiddle

+0

Ty bro尋求答覆。這背後的原因是由於垂直對齊的默認值是底部?你能檢查我的代碼並告訴我設計佈局的有效方法嗎?我在做有效的方法還是需要改進? –

+0

,我也想知道如何在父div(高度:100px)頂部,中間或底部安排一個子div(高度:10px)。我們是否可以使用這種垂直對齊方式將其排出或垂直對齊僅適用於文本? –

+0

使用'inline-block'元素來渲染一個標籤和一個輸入是非常好的。但對於響應可能會很棘手。 – tzi

0

添加到您的CSS ...

#address span{ 
    vertical-align:top; 
} 
+0

Ty bro回覆。這背後的原因是由於垂直對齊的默認值是底部?你能檢查我的代碼並告訴我設計佈局的有效方法嗎?我在做有效的方法還是需要改進? –

0

這樣寫

<span> Address <textarea cols="5" rows="10"></textarea></span> 

的HTML添加到您的CSS

span textarea {vertical-align:top;} 

此代碼應保持標籤在上面,然後你會需要你的texarea對齊到其他文本字段