0

如何在“单击此处”旁边对齐图标？

我可以使用下面的 CSS 来完成它，但是在 PC 上使用 firefox、chrome 和 safari 时，图标没有对齐。

<div class="link_container">
            <a href="#" class="click_action">Click here</a> 
            <a class="sprite_image action_image"></a>
            </div>


.link_container {
    margin-top: -10px;
    padding-bottom: 10px;
}
.click_action {
    color: #999;
    font-size: 12px;
    text-decoration:none;
}
.sprite_image {
    background: url('sprite.png');
}
.action_image {
    background-repeat: no-repeat;
    background-position: -116px -12px;
    width: 10px;
    height: 10px;
    position: absolute;
    margin-left: 3px;
    margin-top: 4px;
}
4

2 回答 2

1

您可以将其添加到 .click_action 和 .sprite_image css：

float: left;
于 2013-05-24T13:17:51.830 回答
0

很多浏览器讨厌 - 定位，现在一切看起来都不错，但我的想法是，让它成为 click here 的一部分，而不是单独的部分。只需添加此 CSS，您的整个 ahref 和图标即可点击。见小提琴 

.click_action {
    background: url("http://www.icondeposit.com/local--files/imageid:105/Preview-blue-set-icons.jpg") no-repeat scroll -6% 29% transparent;
    color: #999999;
    display: block;
    font-size: 12px;
    height: 42px;
    padding: 15px 0 0;
    text-decoration: none;
    width: 87px;
}
于 2013-05-24T13:34:11.180 回答