Question

我已经拍摄了一个锚标记，并将其设计为看起来像一个典型的按钮（铁杆的东西!!哈哈！），但当我在一个div 75%宽的div中使用这个按钮时，我做了同样但在一个20%宽的div内;共享相同风格的两个按钮看起来不一样吗？

我知道这是因为我的按钮样式上的填充是基于其父级的宽度以及它们看起来不同的原因。

因此，每当有新的宽度时，我都不会创建新版本的按钮类;我怎样才能绕过这个并使两个按钮看起来都一样，无论父宽度如何？

请查看我的js小提琴链接，了解我迄今为止对此问题进行了编码

感谢您的时间

Answer 1

“无论父宽度如何，我怎么能让两个按钮看起来都一样？”

以像素（px）而不是百分比（％）定义按钮宽度会有问题吗？

编辑：从评论中，这是一种在不同容器中定义按钮大小的方法。

.wide .button {width:20%;}
.small .button {width:50%;}

Answer 2

请勿在填充中使用%，而是使用px确定按钮输出上所需的填充。

注意：填充将使用“减去”规则的容器大小的空格。

以下是样本：

.button {
  background-color: #333333;
  color: #ffffff;
  padding: 6px 12px; // from 10% 5%
  /* over kill just for example */
}