我正在嘗試創建一個註冊表單,並且遇到了一個問題。 jsfiddlehere
輸出如下圖所示 如圖中所示,我希望地址位於行的頂部,如圖所示,而不使用相對或絕對的樣式位置。有沒有可能用margin或padding來解決這個問題。另一件事是爲什麼地址文本出現在底部,默認情況下不在頂部?是因爲textarea嗎? 在此先感謝html表單佈局
html表單佈局
回答
要對齊verticaly 2 inline-block的元素,你可以使用vertical-align
。 你的情況:
.container span {
padding-left: 40px;
display: inline-block;
width: 30%;
/* Add vertical alignment */
vertical-align: top;
}
這裏是一個fiddle。
Ty bro尋求答覆。這背後的原因是由於垂直對齊的默認值是底部?你能檢查我的代碼並告訴我設計佈局的有效方法嗎?我在做有效的方法還是需要改進? –
,我也想知道如何在父div(高度:100px)頂部,中間或底部安排一個子div(高度:10px)。我們是否可以使用這種垂直對齊方式將其排出或垂直對齊僅適用於文本? –
使用'inline-block'元素來渲染一個標籤和一個輸入是非常好的。但對於響應可能會很棘手。 – tzi
添加到您的CSS ...
#address span{
vertical-align:top;
}
Ty bro回覆。這背後的原因是由於垂直對齊的默認值是底部?你能檢查我的代碼並告訴我設計佈局的有效方法嗎?我在做有效的方法還是需要改進? –
這樣寫
<span> Address <textarea cols="5" rows="10"></textarea></span>
的HTML添加到您的CSS
span textarea {vertical-align:top;}
此代碼應保持標籤在上面,然後你會需要你的texarea對齊到其他文本字段
- 1. HTML表格佈局
- 2. 帶CSS的HTML表單佈局
- 3. HTML中的高效表單佈局
- 4. 格式化HTML表單佈局
- 5. 表單佈局的HTML列或行?
- 6. 簡單的html佈局
- 7. HTML簡單的佈局
- 8. HTML表格頁面佈局
- 9. HTML表格佈局問題
- 10. HTML CSS表格佈局
- 11. 行的HTML表格佈局
- 12. HTML + CSS表格佈局
- 13. HTML將表格轉換爲HTML佈局
- 14. 佈局HTML中的數據輸入表單:表或無表?
- 15. HTML - CSS - 佈局
- 16. 佈局:HTML + CSS
- 17. HTML/CSS佈局
- 18. HTML DIV佈局
- 19. CSS,HTML佈局
- 20. HTML表格或流中表單佈局的最佳實踐?
- 21. 表單佈局與CSS
- 22. symfony:佈局中的表單?
- 23. Bootstrap搜索表單佈局
- 24. winforms多表單佈局
- 25. 簡單的html/css佈局? (二列)
- 26. 適用於iPad的簡單HTML佈局
- 27. 簡單的HTML佈局引擎?
- 28. 簡單的CSS HTML佈局問題
- 29. 基本HTML佈局
- 30. HTML和CSS佈局
CSS #address跨度{ vertical-align:top; } –
我也想知道如何在父div(height:100px)頂部,中間或底部安排一個div div(height:10px)。我們是否可以使用這種垂直對齊方式將其排出或垂直對齊僅適用於文本? –