块<a> with image - CSS</a>内的文本显示

Question

我有一个如下页面;

<style type="text/css">
#test a{
  display: block;
  width: 150px;
  height: 50px;
  background-color: #CCCCCC;
}
</style>

<div id="test">
    <a>text text text<img src="image.jpg"></a>
</div>

我得到的结果就像;

但我想要类似的东西;

Here 是小提琴

有人知道如何解决这个问题吗？

Answer 1

您可以将vertical-align:top添加到图片

#test img{vertical-align:top;}

Updated fiddle

Answer 2

您好，您可以定义#test img {vertical-align:top;}

就像这样

<强> CSS

#test a{
  display: block;
  width: 150px;
  height: 50px;
  background-color: #CCCCCC;
}

#test img{vertical-align:top;}

<强> HTML

<div id="test">
    <a>text text text<img src="http://i.imgur.com/VlyB1.jpg"></a>
</div>

现场演示http://jsfiddle.net/rohitazad/nPSBL/2/

Answer 3

尝试添加到CSS：

#test a {
    vertical-align: top;
}