CSS 宽度:继承减号(或加号)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20958852/
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-30 01:32:32  来源:igfitidea点击:

width: inherit minus (or plus)

cssinheritanceheightwidthoverflow

提问by masteringtaiwan

Is there any method to inherit the width from other class but with minus (or plus) pxsize ?

是否有任何方法可以从其他类继承宽度但具有减(或加)px大小?

This is not proper cssbut get the idea:

这是不正确的,css但明白了:

width: inherit - 20px ;

Since I'm using inherit width and 10pxpadding it goes outside the box for + 20px;

由于我使用的是继承宽度和10px填充,因此它超出了+ 20px;

Live example:

现场示例:

http://jsfiddle.net/d4Pge/

http://jsfiddle.net/d4Pge/

回答by acarlon

You can also use calc(see this jsfiddle), but I think that the box-sizing approach by kei might be better for your specific case.

您也可以使用calc(请参阅此 jsfiddle),但我认为 kei 的 box-sizing 方法可能更适合您的特定情况。

The important parts for calc are:

calc 的重要部分是:

position:relative;
width: calc(100% - 18px);

Check support for calc here.

在此处检查对 calc 的支持。

回答by kei

Add box-sizing:border-boxto .cb .x

添加box-sizing:border-box.cb .x

DEMO

演示

回答by Jukka K. Korpela

No. CSS inheritance does not work that way at all. When an element inherits a property, it always inherits from its parent (not from a class), and the property value of the parent.

不,CSS 继承根本就不能那样工作。当一个元素继承一个属性时,它总是从它的父级(而不是从一个类)继承,以及父级的属性值。

To achieve what you are after, you should describe what you really wish to achieve (instead of an assumed technique). You are now using two nested divelements, both sharing the same class, which is probably superfluous.

为了实现您所追求的目标,您应该描述您真正希望实现的目标(而不是假设的技术)。您现在正在使用两个嵌套div元素,它们共享同一个类,这可能是多余的。