链接 2 行文本和图像答案

【问题标题】：Link with 2 lines text and image链接 2 行文本和图像
【发布时间】：2013-09-10 14:03:33
【问题描述】：

如何使用 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;
}

【问题讨论】：

nav 应该以# 为前缀，因为您没有任何以nav 作为标签名称的元素。相反，您只有一个带有id 的元素作为nav。此外，将Line1 也移动到span 内部并将display: inline-block; 设置为#nav span
在上面的评论中，我的意思是要在 CSS 中添加前缀。

标签： html css button hyperlink

【解决方案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;
}

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

【讨论】：

谢谢，这是我认为最好的解决方案。

【解决方案2】：

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

编辑如果您需要为每个链接提供动态图像，您可以随时使用内联样式来指定背景图像 url。

【讨论】：

【解决方案3】：

您也可以通过将其浮动到左侧来执行此操作。

这样

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

Working Fiddle

【讨论】：

【解决方案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
}

【讨论】：