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

多くのブラウザは嫌いです - ポジショニング、今ではすべてがうまく見えますが、私の考えでは、それを別の部分ではなく、ここをクリックの一部にすることです. この 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 に答える