如何使子 div = 父级的高度，其中具有 display:inline-block 和未指定的高度？

发布于 2024-12-10 15:24:48 字数 821 浏览 0 评论 0原文

由于与 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，而不是 #，因此我需要分离按钮的组件。

谢谢。

原文

I have to separate the background of a button from the parent, for reasons related to the tumblr customisation quirks.

Here is the 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>

This is the css I'm stuck with, at least for the tag:

a{
    display: inline-block;
}

I've made a very descriptive jsfiddle here: http://jsfiddle.net/hVuaf/35/

NB: It's a no brainer to just go like this for eg (inline CSS for demo purposes):

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

But i just can't, it's got to do with me wanting control over variable assigned colours in Tumblrs customised theme edit panels. Basically it supports colours to the hills, but i need to work with rgba, not #, hence my need to separate the components of the button.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呢古 2024-12-17 15:24:48

这就是你所追求的吗？

http://jsfiddle.net/cdj2L/

基本上，我已将锚点设置为position:relative，然后里面的文字只是标准的。然后我将背景设置为绝对值，宽度/高度为 100%，填充锚点。最后，z-index 整理了分层。

希望有帮助:)

回复收藏 0 原文

假扮的天使 2024-12-17 15:24:48

这是您要找的吗？我删除了 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/

Is this what you are looking for? I removed the bg element and just used the container to set the background.

<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/

回复收藏 0 原文