如何把a标签做成块状标签 覆盖在子元素之上


做百度分享的时候遇到一个问题:

自定义样式的时候,百度生成的a标签和我制作的按钮并排显示了。就是a标签没有覆盖到按钮,导致点击按钮没有反应。

用F12看了一下:
图片描述
可以看到 浅绿色的块(a标签) 并没有覆盖到浅蓝色的块(按钮)

我CSS学的不是特别好,想请教各位,该如何调整样式才能让这个a标签完全覆盖到我的按钮上?
也就是浅绿色完全覆盖在浅蓝色之上?

HTML代码:


 <li>
    <a class="tooltip tooltipstered" data-cmd="qzone" href="#">
        <i class="fa fa-star marginright"></i>
    </a>
</li>

需要把a标签覆盖在i标签之上 而不是并排显示

提供一下百度的原样式


 .bdshare-button-style0-16 a, .bdshare-button-style0-16 .bds_more {
    float: left;
    font-size: 12px;
    padding-left: 17px;
    line-height: 16px;
    height: 42px;
    background-image: url(../img/share/icons_0_16.png?v=d754dcc0.png);
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 6px 6px 6px 0;
}

谢谢各位。

css HTML 百度分享

不正经的桃叔叔 9 years, 4 months ago

padding-left去掉应该就能在上面了,不过这个应该不是点击无效的原因

Local answered 9 years, 4 months ago

首先,图中浅蓝色属于 a 元素区域,是内容区域,浅绿色区域是 a 的内边距 padding-left: 17px 渲染的效果,橘色是外边距。
及时你点击的是图标 i 标签,如果事件没有再这里被阻止冒泡,那么一定会冒泡到它的父元素 a ,所以 a 一定可以获取到点击事件。 所以这里理论上来说,不是布局的问题。
我猜测,也许是题主在点击蓝色区域的图标时,阻止了冒泡吧?

werwolf answered 9 years, 4 months ago

Your Answer