0

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

4 回答 4

4

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

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

于 2013-09-10T14:13:14.957 回答
1

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

编辑如果您需要每个链接的动态图像，您始终可以使用内联样式来指定背景图像 url。

于 2013-09-10T14:08:22.233 回答
0

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

像这样

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

工作小提琴

于 2013-09-10T14:15:32.000 回答
0

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
}
于 2013-09-10T14:25:44.697 回答