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

【问题标题】：Size elements by content in discrete increments with css使用 css 以离散增量按内容调整元素大小
【发布时间】：2016-01-15 01:02:31
【问题描述】：

我知道您可以使用min-width 和max-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? */
}

&lt;button&gt;Button&lt;/button&gt;

我在这里寻找一个没有 js 的解决方案。仅限 Chrome 的解决方案也可以。

【问题讨论】：

没有 js 是不可能的。对不起。我希望我错了
你不能在纯 CSS 中进行这种计算。也许 SASS 或 LESS 可以帮助你，但我不这么认为。你说I'm looking for a no-js solution 但我认为你只获得js solutions
jsfiddle.net/4uf4eaey/2 不能被 20 整除，但在 100 到 160 之间
@Dhaval，“不能被 20 整除”——但这是问题的本质。无论如何，感谢您的尝试。

标签： html css

【解决方案1】：

为此，我会推荐两件事：

1) 你可以使用 CSS calc 函数。在这种情况下，您需要建立一些样式指南（例如 button-small、button-mid、button-large）。在 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 - 寻找：控制指令和表达式。

【讨论】：

使用这些方法中的任何一种，我都需要事先知道尺寸等级（小、中、大等），但不幸的是，事实并非如此。 Sass（通常）是一个服务器端预处理器，它向客户端提供纯 css ——所以它不能做纯 css 不能做的事情。我希望有点像css grid module auto placement algorithm，但是是元素大小而不是元素位置。