按鈕是底部，另一個按鈕是頂部，爲什麼？

我有2個CSS按鈕的問題。我想將兩個按鈕對齊。但CSS甚至不喜歡我想要的。因爲按鈕是底部，而另一個按鈕是頂部。請參閱圖片：http://home.arcor.de/freedownload/buttonwrong.jpg 按鈕是底部，另一個按鈕是頂部，爲什麼？

也許您有解決方案嗎？這將是充分讚賞。

下面是HTML代碼：

<head> 
<link href="formular.css" type="text/css" rel="stylesheet"> 
</head> 

<span id="form1"><input type="text" id="form_username" name="username"></span><span id="form2"><input type="image" src="loginbutton.png"></span>

這裏是CSS代碼：

#form_username { 
    background: white url(username.png) left no-repeat; 
    background-position: 8px; 
    color: #adadad; 
    padding: 8px; 
    padding-left: 32px; 
    font-family: Verdana; 
    font-size: 12px; 
    width: 200px; 
    border: 1px solid #e4e4e4; 
    outline: 3px solid #efefef; 
}

來源

2013-10-06 mangosaft

的jsfiddle竟被d很好。你有沒有嘗試刪除填充：8px？ – 2013-10-06 14:47:14

我已經試過了。它不起作用。我與JSFiddle一起工作..但只有我無法找到解決方案。 – mangosaft

@mangosaft：你明白他爲什麼要求一個jsfiddle嗎？這是我們可以看到的代碼。我們並不在意你是否使用它，但它是關於美國的：社區;那些可能願意回答你的問題的人。 –

嘗試增加這種風格你#form_username

float: left;

Demo

來源

2013-10-06 15:05:01 akinuri

float：left會自動將元素顯示爲一個塊，所以只有浮點纔夠用:) – nkmol

@nkmol更像是一個'inline-block'，但好點.. +1 – avrahamcool

With margin-top：3px;那麼它的工作。謝謝！ :) – mangosaft

按鈕是底部，另一個按鈕是頂部，爲什麼？

回答

相關問題