gpt4 book ai didi

html - 使用 css 以离散增量按内容调整元素大小

转载 作者:太空宇宙 更新时间:2023-11-04 13:09:50 24 4
gpt4 key购买 nike

我知道您可以使用 min-widthmax-width 设置计算宽度值的上限和下限。但是有没有办法让元素根据内容扩展,但只能分步进行?

例如,我有一个带有动态文本内容的按钮,我希望它的宽度(以像素为单位)只能被 20 整除并且介于 100 和 160 之间(因此它可以是 100、120、 140 或 160 像素宽):

button {
min-width: 100px;
max-width: 160px;
/* what would I put here to prevent it being, say, 150px wide? */
}
<button>Button</button>

我在这里寻找无 js 解决方案。仅限 Chrome 的解决方案也可以。

最佳答案

为此我推荐两件事:

1) 您可以使用 CSS calc 函数。在这种情况下,您需要建立一些样式指南(例如,小按钮、中按钮、大按钮)。在 Css 中你会使用例如:

.button-small {
width: 180px //that would be a default value for non-supported browsers
width: calc(100%-20px);
}

使用它时,您可能会影响类,但您需要真正考虑清楚(另一方面,使用类然后更改它们的 css 会更容易)。但它不会准确。

为了使事情更准确,您需要在您的案例中使用类似 js 的东西:

2) 使用Sass。如果您不寻找js解决方案。 Sass 易于学习,并为您提供所有原生的所有主要功能(php、javasript ....)在这里您可以定义条件并根据需要使用它们(例如使用模数)。 http://sass-lang.com/documentation/file.SASS_REFERENCE.html - 寻找:控制指令和表达式。

关于html - 使用 css 以离散增量按内容调整元素大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34792243/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com