CSS 绝对元素继承相对父div的宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2394453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:39:59  来源:igfitidea点击:

Absolute element inheriting relative parent div's width

cssnestedparent-childcss-position

提问by abysslogic

I am trying to position a gradient over an inline / inline-block anchor link, and have that gradient inherit the width of that parent anchor. The problem is that the span either inherits the entire width of the anchor's parent, or just the width of the  . I am unable to get the span element to properly inherit the width while maintaining the anchors inline display.

我试图在一个内联/内联块锚链接上放置一个渐变,并让该渐变继承该父锚的宽度。问题是跨度要么继承锚的父级的整个宽度,要么只继承   的宽度。我无法在保持锚点内联显示的同时让 span 元素正确继承宽度。

CSS

CSS

a { width: auto; display: inline-block; }

a span { background: url(../images/fade_h1.png); width: 100%; height: 12px; position: absolute; display: block; z-index: 3; }

HTML

HTML

<a href="index.php"><span>&nbsp;</span>Index</a>

回答by Pekka

Can't be done with position: absoluteas far as I can see.

position: absolute就我所见,无法完成。

I'm not sure whether this will serve you, but how about giving the aposition: relativeand the a span

我不确定这是否对你有用,但是如何给予aposition: relativea span

left: 0px;
right: 0px;
top: 0px;
bottom: 0px;

?

?