Question

由于与tumblr自定义怪癖相关的原因，我必须将按钮的背景与父项分开。

这是html：

<a href="link">
    <div class="innerNest"> //I'm guessing we need this to bring the two divs to T:0 L:0
        <div class="buttonText">{tumblr variable}</div>
        <div class="buttonBG"></div>
    </div>
</a>

这是我坚持的css，至少对于标签：

a{
    display: inline-block;
}

我在这里做了一个非常具有描述性的jsfiddle：http://jsfiddle.net/hVuaf/35/

注意：这样做是不明智的（例如，用于演示目的的内联CSS）：

<a href="link" style="background-color:#fff;display:inline-block">Link</a>

但我不能，这与我想要控制Tumblrs定制主题编辑面板中的变量指定颜色有关。基本上它支持山丘的颜色，但我需要使用rgba，而不是＃，因此我需要分离按钮的组件。

感谢。

Answer 1

这就是你想要的吗？

http://jsfiddle.net/cdj2L/

基本上，我已经将锚设置为position：relative，然后里面的文本只是标准的。然后我设置为绝对和宽度/高度的背景是100％，填充锚。最后，z-index对分层进行了分类。

希望有所帮助：）

Answer 2

这是你在找什么？我删除了bg元素，只是使用容器来设置背景。

<a href="link">
    <div class="inlineNest">
        <div class="btText">Link</div>
    </div>
</a>

.inlineNest {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(255,0,0,0.5);
}

.btText {
    padding: 5px;
}

http://jsfiddle.net/mrtsherman/hVuaf/43/

Answer 3

你能做到这一点：http://jsfiddle.net/hVuaf/45/

如何使子div =父的高度显示：内联块和未指定的高度？

3 个答案: