Question

我正在为CSS框架构建一些全局按钮类，我想知道是否有任何方法可以在不进行硬编码的情况下将元素的宽度设置为与高度相同。

这是它如何工作的一个例子：

HTML

<button class="button square-button">OK</button>

<div class="container">
    <button class="button large-button square-button">OK</button>
</div>

CSS

.button {
    height: 50px;
    padding: 0 20px;
}

.square-button {
    width: (always-same-as-height);
    padding: 0; // Disable padding so it becomes a square
}

...

.container {
    height: 100px

    .button {
          height: inherit;
    }
}

在某些情况下，我希望能够根据容器的高度设置高度，并让所有带有square-button类的按钮动态调整为该高度，同时仍保持完美的正方形。

仅使用CSS可行吗？

Answer 1

您可以使用CSS变量模块来实现。但是，浏览器对CSS变量的支持不是很好。因此，请首先检查您希望支持的浏览器版本是否已实现CSS模块，以谨慎操作。

按钮总是正方形，高度可变

1 个答案: