的圖像會比輸入

高我有一個假設是旁邊這裏輸入圖像是代碼：的圖像會比輸入

<style type="text/css"> 
#post_comments{ 
    margin-top:1px; 
    max-width: 568px; 
    border: 1px solid #eee; 
} 
.comments{ 
    text-align: center; 
    background: #eee; 
    color:#555; 
    max-width: 568px; 
    height: 40px; 
    margin-left: auto; 
    margin-right: auto; 
} 
.comments:hover{ 
    color: #333; 
} 
.make_comment{ 
    margin-top: 0px; 
    margin-bottom: 2px; 
    width: 400px; 
    height: 25px; 
} 
</style> 
<div id="post_comments"> 
    <div class="comments"> 
     <img src="/elitequorum/images/image.jpg" style="margin-top: 2px;" width="35" height="35"> 
     <input placeholder="Make a comment...." type="text" class="make_comment"> 
    </div> 
</div>

你們能幫助我對齊圖像和輸入在一起，使得圖像不會高於輸入？謝謝。

來源

2013-02-21 Eduardop911

輸入和圖像是不同的高度 – 2013-02-21 05:20:32

圖像自動對齊到頂部。嘗試添加該到輸入CSS：

vertical-align:top;

來源

2013-02-21 05:20:43 Gregg

謝謝這幫助我修復它:) – Eduardop911 2013-02-21 05:23:35

我個人更喜歡用我的CS S：'img {vertical-align：bottom}'。例如，它使它們很好地平鋪。 – 2013-02-21 05:26:05

在CSS中使用：

<style type="text/css"> 
#post_comments{ 
    margin-top:1px; 
    max-width: 568px; 
    border: 1px solid #eee; 
} 
.comments{ 
    text-align: center; 
    background: #eee; 
    color:#555; 
    max-width: 568px; 
    height: 40px; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align:top; 
    margin-top: 10px; 
} 
.comments:hover{ 
    color: #333; 
} 
.make_comment{ 
    margin-top: 5px; 
    margin-bottom: 2px; 
    width: 400px; 
    height: 25px; 
} 
</style>

在HTML中使用：

<div id="post_comments"> 
    <div class="comments"> 
     <img src="/elitequorum/images/image.jpg" style="margin-top: 2px;vertical-align:top;" width="35" height="35"> 
     <input placeholder="Make a comment...." type="text" class="make_comment" > 
    </div> 
</div>

希望它可以幫助你......

來源

2013-02-21 05:26:29

的圖像會比輸入

回答

相關問題