圖像，彼此相鄰輸入文本：垂直失敗

Question

我有這樣的形式：

<div id="newletter"> 
<form> 
    <img width="94" height="61" alt="newsletter email" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-d0K0OLGJ-sYQr96JWC6Kz38fd8aFnhiIer4B9fpNiPyic_Tw"> 
    <input type="text" name="Nev" placeholder="Név"> 
    <input type="text" name="Email" placeholder="Email cím"> 
    <input type="submit" value="Feliratkozom"> 
</form> 

CSS

#newletter form { 
    text-align: center; 
} 
#newletter img { 
    display: inline-block; 
    margin-right: 20px; 
} 
#newletter input { 
    height: 61px; 
    border: none; 
    border-radius: 4px; 
    color: #434343; 
    font-family: rock; 
    padding-left: 20px; 
    font-size: 0.6em; 
    display: inline-block; 
    margin-right: 20px; 
} 
#newletter input[type="submit"] { 
    background-color: black; 
    color: white; 
    border: none; 
    height: 58px; 
    display: inline-block; 
    padding-left: 0px; 
} 
body { 
    background-color: red; 
} 

小提琴這裏：http://jsfiddle.net/8G2Pw/

一個你可以看到，圖像比它應該高。它應該和輸入字段在同一行。如何解決它？

Answer 1

你有vertical-align:top;從圖像中丟失。

圖片默認爲inline屬性...所以當你製作它們時block ....並沒有提及它們的位置，它們傾向於默認垂直對齊！

它應該是：

 #newletter img { 
      display: inline-block; /* here you changed the default display type 
of image, so v-alignment is also required if you want a custom alignmnet*/ 
      margin-right: 20px; 
      vertical-align:top; /*added*/ 
     } 

working demo

Answer 2

試試這個代碼：

Fiddle：

#newletter img 
    { 
     display: inline-block; 
     margin-right: 20px; 
     float: left; 
    } 

Answer 3

<div id="newletter">   
<form> 
<table> 
<tr> 
<td> 
    <img width="94" height="61" alt="newsletter email" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-d0K0OLGJ-sYQr96JWC6Kz38fd8aFnhiIer4B9fpNiPyic_Tw"> 
</td> 
<td valign = "bottom"> 
<input type="text" name="Nev" placeholder="Név"><input type="text" name="Email" placeholder="Email cím"><input type="submit" value="Feliratkozom"> 
</td> 
    </tr> 
    </table> 
</form> 
</div>