0

我有一个假设在输入旁边的图像是代码：

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

你们能帮我将图像和输入对齐在一起，这样图像就不会高于输入吗？谢谢。

4

2 回答 2

0

图像会自动与顶部对齐。尝试将其添加到输入 css：

vertical-align:top;
于 2013-02-21T05:20:43.890 回答
0

在 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-21T05:26:29.603 回答