的图像会比输入

高我有一个假设是旁边这里输入图像是代码：的图像会比输入

<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

的图像会比输入

回答

相关问题