Question

如何对齐“点击此处”旁边的图标？

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

<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;
}

Answer 1

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

float: left;

Answer 2

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

.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;
}

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

2 个答案: