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

内联块应解决您的问题：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;
}

您的文本元素呈现为内嵌元素，因此，请将其包裹在图像下方。

Answer 2

最好使用CSS将图像作为背景图像放在链接上，然后使用填充将文本与图像对齐，确保为文本留出足够的填充以清除左侧的图像。此外，使用背景位置将图像定位在右侧或任何位置（如果需要）。它还使HTML更清晰，更易于阅读。

编辑如果您需要为每个链接提供动态图片，您始终可以使用内联样式指定背景图片网址。

Answer 3

您也可以将其浮动到左侧。

喜欢这个

<span style="line-height:15px;float:left">Line 1<br>Line 2</span>

Working Fiddle

Answer 4

HTML：

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

        <div>
            Line 1<br>
            Line 2
        </div>
    </a>
</div>

CSS：

#nav img, #nav div{
    float: left
}

这将使“第1行”，“第2行” - 以及您放入其中的任何行 - 始终位于图像的右侧。如果您希望文本环绕图像，请将CSS更改为：

#nav img{
    float: left
}

链接2行文本和图像

4 个答案: