html - 带有图像的块内的文本显示- CSS

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>

我得到的结果是；

但我想要类似的东西；

这是小提琴

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

Answer 1

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

#test img{vertical-align:top;}

更新的小提琴

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/ ​</p>

Answer 3

尝试添加到 CSS：

#test a {
    vertical-align: top;
}