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>

图像，输入文本彼此相邻：垂直失败

3 个答案: