輸入文本字段填充

我有這個簡單的代碼 - 一個文本字段和一個圖像（圖像的高度爲30像素）輸入文本字段填充

的代碼是：

<input type="text" style="height:30px;" /> 
<input type="image" src="images/download_button.png" />

和結果是兩個元件與高度30PX那沒有對齊。該文本字段相對於圖像 - 像填充？你知道嗎，爲什麼元素不對齊？

截圖： enter image description here

來源

2013-06-21 Kiril Spasov

嘗試刪除空白和邊距：

<input type="text" style="margin:0px;padding:0px;height:30px;" /> 
<input type="image" style="margin:0px;padding:0px;" src="images/download_button.png" />

請記住，文本輸入框是可能會增加2個像素塊的兩側的邊框。您可以將所有邊框與border:0;一起移除。

另外，請仔細檢查標記中其他地方的任何矛盾的CSS規則。

編輯：

它的問候與輸入的行爲做浮動。添加float:left;兩種風格來看看我的意思。直到您指定希望它們出現在同一行上時，他們不知道如何表現出彼此相鄰的行爲。

來源

2013-06-21 12:03:38 shennan

謝謝您的回答。不幸的是，你建議不起作用！檢查你的代碼.... –

我沒有你的download_button.png，所以我不能真正的測試它。這只是一個猜測。你是說HTML的突破，還是你說邊際，填充和邊框設置爲0並不能解決你的問題？我也會爲圖片做同樣的事情。 – shennan

只需拍攝30px高的圖片，或者發郵件發送。 Yess，我嘗試了你的建議，但它不起作用......我也從結果中徘徊，但這是事實......測試它！ –

  Assuming your form id is "myform" 

      #myform input{ 

      vertical-align:middle; 

     } 

     will do the trick. 
if you are not using form:Try 

<input type="text" style="height:30px;vertical-align:middle;" /> 
<input type="image" style="height:30px;vertical-align:middle;" src="images/download_button.png" />

來源

2013-06-21 12:07:01 karthi

謝謝你的回答....我沒有窗體... –

@KirilSpasov在沒有窗體的文本輸入中沒有太多意義將它發送回服務器。但這是一個單獨的問題。 – shennan

然後只需將其添加到您的表單域。 – karthi

使用CSS「頂」屬性來增加按鈕距離頂部：

<style> 
    [selector for image] {top: 20px;} 
</style>`

來源

2013-10-26 04:58:31

輸入文本字段填充

回答

相關問題