html - 链接 2 行文本和图像

Question

如何使用 HTML 和 CSS 创建这样的链接: 它没有像我希望的那样回应。 我试图完成的是创建一个导航链接，在左侧放置一个图像，并在图像旁边而不是图像下方放置 2 行文本。

html:

<div id="nav">
    <a href="#"><img src="http://www.werkenbijavl.nl/images/WerkenBijAVL/icon-email.png" heigh="24px" width="24px" alt=""> Line 1<br><span>Line 2</span></a>
</div>

CSS:

nav a {
background: grey;
padding: 10px;
text-align: center;
text-decoration: none;
line-height: 24px;
vertical-align: middle;
}

nav img {
padding-right: 10px;
}

nav span {
font-style: italic;
}

Answer 1

内联 block 应该可以解决您的问题:http://jsfiddle.net/sZnaR/

HTML:

<a href="#">
    <img src="blah" />
    <span class="text">
        Line 1<br/>
        Line 2
    </span>
</a>

CSS:

a {
    display: block;
    text-decoration: none;
}
a img {
    display: inline-block;
    width: 30px;
    height: 30px;
}
a span {
    display: inline-block;
}

您的文本元素呈现为内联元素，并因此包裹在图像下方。