此页内容

约 304 字大约 1 分钟

2023-08-12

Button Minimum Width

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

请看以下示例:

英语:

中文:

阿拉伯语:

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

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

button {
  min-width: 90px;
}

英语:

中文:

阿拉伯语: