изображение появляется больше, чем вход

Question

У меня есть изображение, которое предполагают, чтобы быть рядом с входом здесь есть код:

<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> 

вы, ребята, можете помочь мне выровнять изображение и ввод вместе с тем, что изображение привычка быть выше ввода? Благодарю.

Answer 1

Изображение автоматически выравнивается вверх. Попробуйте добавить это к входному CSS:

vertical-align:top; 

Answer 2

При использовании 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> 

Надеется, что это полезно для вас ...