使按钮宽度适合文本

Question

虽然我正在摆弄这个'花式3D按钮'的例子,但我发现它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属性,该按钮将填充页面宽度.

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

Answer 1

删除宽度,display: block然后添加display: inline-block到按钮.将它保持居中,你可以添加text-align: center;上body或做同样的一个新创建的容器上.

这种方法的优点(如同以自动边距为中心)是按钮将保持居中,无论它具有多少文本.

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

Answer 2

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

您可以使用：

width: fit-content;

Answer 3

我喜欢Roger Cruz的回答：

width: fit-content;

我只想补充一点，你可以使用

padding: 0px 10px;

在按钮文本的右侧和左侧添加一个漂亮的 10px 填充。否则文本会沿着按钮的边缘向上，这看起来不太好。

Answer 4

很晚了，不确定在提出问题时是否可用 width: auto;

似乎可以解决问题