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>

希望对你有所帮助......

图像看起来高于输入

2 个答案: