使按钮宽度适合文本

Question

当我摆弄这个 “Fancy 3D Button” 示例时，我发现 width 似乎是硬编码的以适应文本的宽度。

这是 HTML / CSS：

 body {
  background-image: url(http://subtlepatterns.com/patterns/ricepaper.png)
}
a {
  position: relative;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  background-color: rgba(219, 87, 5, 1);
  font-family: 'Yanone Kaffeesatz';
  font-weight: 700;
  font-size: 3em;
  display: block;
  padding: 4px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  margin: 100px auto;
  width: 160px;
  text-align: center;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}
a:active {
  -webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  -moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  position: relative;
  top: 6px;
}

 <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>

<a href="javascript:void(0);">Push me!</a>

如果我删除 width 属性，按钮将填满页面宽度。

有没有办法让按钮的宽度自动适合文本？

原文由 chenaren 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

删除宽度和 display: block 然后添加 display: inline-block 到按钮。要让它保持居中，您可以在 text-align: center; body 或在新创建的容器上执行相同操作。

这种方法的优点（与使用自动边距居中相反）是无论文本有多少，按钮都将保持居中。

示例： http ://cssdeck.com/labs/2u4kf6dv

原文由 Natsu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您正在开发现代浏览器。 https://caniuse.com/#search=fit%20content

您可以使用：

 width: fit-content;

原文由 Roger Cruz 发布，翻译遵循 CC BY-SA 4.0 许可协议