水平對齊輸入字段

我正在嘗試獲取輸入字段，並且它在同一水平線上關聯了提交按鈕，但證明是一個挑戰。水平對齊輸入字段

這裏是我的代碼：

<form name="prodSearch" action="/products/index.cfm" method="post"> 
     <input type="text" name="prodKeyword" maxlength="50"> 
     <input type="image" name="submit" src="/_css/images/but-ok-small.png"> 
</form>

您可以查看站點（形式是在頭）：http://d620923.u161.fasthit.net/

基本上我要麼需要微調輸入字段了一下，還是按鈕了一下。我已經嘗試了所有的東西..線高度，填充，邊距，表格等..但不能讓他們預算。

任何建議非常感謝！

來源

2012-03-18 Jason

您是否嘗試使用垂直對齊屬性。您可以使用相同的高度，填充和邊距以確保兩個元素都對齊。 – 2012-03-18 11:39:55

真的不清楚你的問題是什麼。您是否試圖將兩個輸入放到同一行（水平分佈），或試圖排列已經在同一行的兩個輸入（垂直）。 – jpaugh 2017-08-10 20:19:06

嗨Jpaugh ..我看不清楚它是如何不明確..根據問題標題，我試圖調整他們「水平」...記住這是張貼5年前，很可能不會在Bootstrap或谷歌資料..和字段沒有直接與按鈕對齊，其中一個稍高於另一個。下面的答案解決了它。 – Jason 2017-08-11 11:40:27

添加到您的風格。

#productSearch form input { 
    vertical-align: middle; 
}

來源

2012-03-18 11:42:06 Joseph

謝謝約瑟夫！ – Jason 2012-03-18 12:01:13

-1

爲文本框：

float: left;

的按鈕：

margin-top: 2px; 
float: right;

來源

2012-03-18 11:39:42 lvil

像素邊距僅適用於特定的字體大小。問題在於，文本字段的高度以ems度量，而按鈕的高度以像素爲單位。 – 2012-03-18 11:45:06

水平對齊輸入字段

回答

相關問題