使按钮宽度适合文本

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 属性，按钮将填充页面宽度。

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

Answer 1

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

这种方法的优点（相对于自动边距居中）是按钮将保持居中，无论它有多少文本。

示例：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;

在按钮文本的右侧和左侧添加一个漂亮的 10 像素填充。否则文本会正好在按钮的边缘，看起来不太好。

Answer 4

很晚了，在问这个问题时不确定这是否可用，设置width: auto;

似乎可以解决问题

Answer 5

也可以使用display: inline-flex 和display: table 来保持元素相对于其内容的大小

居中可以用..完成。

• text-align: center; 在父级（或更高，它是继承的）

• display: flex; 和 justify-content: center; 在父级上

• position: absolute; left: 50%; transform: translateX(-50%); 开启 具有位置的元素：相对； （至少）在父母身上。

这是来自 CSS Tricks 的 flexbox guide

这是来自 CSS Tricks 的 article on centering。

保持元素的宽度与其内容一样宽。

• 可以使用display: table;

• 或内联任何东西，包括我的 sn-p 中使用的 inline-flex 下面的例子。

请记住，当使用 flexbox 的 justify-content: center; 居中时，当文本换行时，文本将左对齐。因此，如果您的网站是响应式的并且您希望换行，您仍然需要text-align: center;。

• this stack answer 中的更多示例

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}
.container {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
  height: 50%;
}
.container.c1 {
  text-align: center; /* needed if the text wraps */
  /* text-align is inherited, it can be put on the parent or the target element */
}
.container.c2 {
 /* without text-align: center; */
}
.button {
  padding: 5px 10px;
  font-size: 30px;
  text-decoration: none;
  color: hsla(0, 0%, 90%, 1);
  background: linear-gradient(hsla(21, 85%, 51%, 1), hsla(21, 85%, 61%, 1));
  border-radius: 10px;
  box-shadow: 2px 2px 15px -5px hsla(0, 0%, 0%, 1);
}
.button:hover {
  background: linear-gradient(hsl(207.5, 84.8%, 51%), hsla(207, 84%, 62%, 1));
  transition: all 0.2s linear;
}
.button.b1 {
    display: inline-flex; /* element only as wide as content */
}
.button.b2 {
    display: table; /* element only as wide as content */
}

<div class="container c1">
  <a class="button b1" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Before And After Wrap</a>
</div>
<div class="container c2">
  <a class="button b2" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Only Before Wrap</a>
</div>

小提琴

https://jsfiddle.net/Hastig/02fbs3pv/

Answer 6

如果您的目标是获得最大的浏览器支持，现代方法是将按钮放在具有 display:flex; 和 flex-direction:row; 的 div 中，同样的技巧适用于具有 flex-direction:column; 的高度或高度和宽度（需要 2 个 div )

Answer 7

尝试将display:inline; 添加到按钮的 CSS 属性中。

Answer 8

只需添加 display: inline-block; 属性并移除宽度。

Answer 9

尝试为标签按钮添加宽度：100%