Button Minimum Width

约 305 字大约 1 分钟

2023-08-12

一个常见的错误是假设按钮宽度应等于其内容加水平填充。这对于单语言网站（例如：英语）可能如预期般工作，但对于多语言网站很容易出现意外的问题。

请看以下示例：

英语：

中文：

阿拉伯语：

可以看到，在英语和中文下，按钮的宽度表现很好，因为其内容足够长。但是在阿拉伯语中，按钮的宽度就很窄，从拥护体验来说，这很不友好，因为对一个主要的按钮来说，它的表现应该足够的直观，方便用户操作。

为避免这种情况，我们可以提前设置按钮的最小宽度。

button {
  min-width: 90px;
}

英语：

中文：

阿拉伯语：