在css中设置超链接图像的样式

时间：2017-05-15 21:22:22

标签： html css

我正在尝试将锚标签应用到我已经在css中设置过的图像，方法是将其向右推（在其包含text-align: right上使用div）并将其从400px调整为25px：

CSS ：

.instagram-section {
    text-align: right;
    font-family: 'Life Savers', cursive;
    font-size: 1em;
}

.ig-logo {
    height: 25px;
}

但我发现，一旦它被<a>标签包围，图像上的所有样式都会丢失：

html （在将锚标签应用于图片之前）：

<div class="instagram-section">
    <strong>... my <a href="https://www.instagram.com/myinstagram/">Instagram</strong></a>
    <!-- <a href="https://www.instagram.com/myinstagram/"> -->
    <img src="/img/icons/instagram/instagram-logo-400.png" class="ig-logo">
    <!-- </a> -->
</div>

enter image description here

html （在将锚标签应用于图片后）：

<div class="instagram-section">
    <strong>... my <a href="https://www.instagram.com/myinstagram/">Instagram</strong></a>
    <a href="https://www.instagram.com/myinstagram/">
    <img src="/img/icons/instagram/instagram-logo-400.png" class="ig-logo">
    </a>
</div>

enter image description here

我对html / css有点新鲜，除了使用已经达到我想要的尺寸的图像外，还没有在互联网上找到太多东西。这很好，但我还需要图像与文本显示在同一行，并且也与右边对齐。

任何指针都会受到赞赏。

1 个答案:

答案 0 :(得分：0)

玩一下，这似乎有效：

<!DOCTYPE html>
<html>

<head>
<script src = "jquery-3.2.1.min.js"></script>
<script src="popup.js"></script>
</head>

<body>
<input id="button1" type=button value=clickme></input>
</body>

</html>

不知道它是否是最好的方法，所以欢迎更好的答案。

相关问题
最新问题