内联元素不会与其他内联图像一起休息
Inline element will not rest even with other inline images
当我制作一个 jsfiddle 来练习我想在网站上做的事情时,它运行良好。 http://jsfiddle.net/texascapresident/27g6f8dw/
HTML
<div class="link-image-container">
<a href="https://twitter.com"><img class="employee-contact-images" src="http://www.texasca.com/graphics/icons/twitter-link.png" /></a>
<a href="https://www.linkedin.com/in/zacharygcook" target="_blank" ><img class="employee-contact-images" src="http://www.texasca.com/graphics/icons/linkedin-link.png" /></a>
<form class="form-containing-email" action="contact-team-member.php" method="POST">
<INPUT TYPE="hidden" NAME="teamMemberName" VALUE="Zach">
<INPUT TYPE="hidden" NAME="teamMemberTitle" VALUE="CTO" >
<input type="image" class="special-email-image" src="http://www.texasca.com/graphics/icons/email-link.png" >
</form>
</div>
CSS
.form-containing-email {
display: inline;
}
然而,在网站上的实践中,其中一张图片(表格中的一张)表现异常。
如您所见,最后一张图片有点"popped up"。我不确定出了什么问题。
网站上的HTML&CSS稍微复杂一些,大家可以自己去看看。
HTML 站点:http://texasca.com/team.html
CSS 站点:http://texasca.com/includes/team.css
如果可以请帮帮我!谢谢。
您需要在 vertical-align:top
部分填写表格 (<form class="form-containing-email" action="contact-team-member.php" method="POST">
)。
当我制作一个 jsfiddle 来练习我想在网站上做的事情时,它运行良好。 http://jsfiddle.net/texascapresident/27g6f8dw/
HTML
<div class="link-image-container">
<a href="https://twitter.com"><img class="employee-contact-images" src="http://www.texasca.com/graphics/icons/twitter-link.png" /></a>
<a href="https://www.linkedin.com/in/zacharygcook" target="_blank" ><img class="employee-contact-images" src="http://www.texasca.com/graphics/icons/linkedin-link.png" /></a>
<form class="form-containing-email" action="contact-team-member.php" method="POST">
<INPUT TYPE="hidden" NAME="teamMemberName" VALUE="Zach">
<INPUT TYPE="hidden" NAME="teamMemberTitle" VALUE="CTO" >
<input type="image" class="special-email-image" src="http://www.texasca.com/graphics/icons/email-link.png" >
</form>
</div>
CSS
.form-containing-email {
display: inline;
}
然而,在网站上的实践中,其中一张图片(表格中的一张)表现异常。
如您所见,最后一张图片有点"popped up"。我不确定出了什么问题。
网站上的HTML&CSS稍微复杂一些,大家可以自己去看看。
HTML 站点:http://texasca.com/team.html
CSS 站点:http://texasca.com/includes/team.css
如果可以请帮帮我!谢谢。
您需要在 vertical-align:top
部分填写表格 (<form class="form-containing-email" action="contact-team-member.php" method="POST">
)。