当前位置：theitroad>Html 使按钮宽度适合文本

Html 使按钮宽度适合文本

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/27722872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 03:16:46 　来源:igfitidea点击:

Make button width fit to the text

htmlcss

提问by chenaren

While I was fiddling with this 'Fancy 3D Button'example, I found that the widthseemed to be hard-coded to fit the text's width.

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

Here is the HTML / CSS:

这是 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>

Normal look

正常外观

If I remove the widthproperty, the button would fill the page width.

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

Without the width property

没有宽度属性

Is there any way to make the button's width fit to the text, automatically?

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

回答by Natsu

Remove the width and display: blockand then add display: inline-blockto the button. To have it remain centered you can either add text-align: center;on the bodyor do the same on a newly created container.

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

The advantage of this approach (as opossed to centering with auto margins) is that the button will remain centered regardless of how much text it has.

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

Example: http://cssdeck.com/labs/2u4kf6dv

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

回答by Roger Cruz

If you are developing to a modern browser. https://caniuse.com/#search=fit%20content

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

You can use:

您可以使用：

width: fit-content;

回答by David Huynh Magic Man

Pretty late and not sure if this was available when the question was asked, set width: auto;

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

Seems to do the trick

似乎可以解决问题

回答by Hastig Zusammenstellen

Keeping the element's size relative to its content can also be done with display: inline-flexand display: table

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

The centering can be done with..

居中可以用..

  • text-align: center;on the parent (or above, it's inherited)

  • display: flex;and justify-content: center;on the parent

  • position: absolute;left: 50%;transform: translateX(-50%);on the element with position: relative; (at least) on the parent.

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

  • display: flex;和justify-content: center;父母

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

Here's a flexbox guidefrom CSS Tricks

这是来自 CSS Tricks的flexbox 指南

Here's an article on centeringfrom CSS Tricks.

这是一篇关于CSS 技巧居中的文章。

Keeping an element only as wide as its content..

保持元素仅与其内容一样宽..

  • Can use display: table;

  • Or inline-anything including inline-flexas used in my snippet example below.

  • 可以使用 display: table;

  • 或内联任何内容，包括inline-flex下面我的代码片段示例中使用的内容。

Keep in mind that when centering with flexbox's justify-content: center;when the text wraps the text will align left. So you will still need text-align: center;if your site is responsive and you expect lines to wrap.

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

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>

Fiddle

小提琴

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

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

回答by Mai

Try to add display:inline;to the CSS property of a button.

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

回答by krishna

just add display: inline-block;property and removed width.

只需添加display: inline-block; 属性和删除的宽度。

回答by Matt Wyndham

I like Roger Cruz's answer of:

我喜欢Roger Cruz的回答：

width: fit-content;

and I just want to add that you can use

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

padding: 0px 10px;

to add a nice 10px padding on the right and left side of the text in the button. Otherwise the text would be right up along the edge of the button and that wouldn't look good.

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

回答by Aleks

If you are aiming for maximum browser support, modern approach is to place button in a div with display:flex;and flex-direction:row;The same trick will work for height with flex-direction:column;or both height and width(will require 2 divs)

如果您的目标是最大程度地支持浏览器，那么现代方法是将按钮放置在一个 div 中，display:flex;并且flex-direction:row;同样的技巧适用于高度flex-direction:column;或高度和宽度（需要 2 个 div）

相关推荐

Html Flexbox 与 Twitter Bootstrap（或类似框架）

Html Flexbox 与 Twitter Bootstrap（或类似框架）

Html 去除文本输入的内部阴影

Html 去除文本输入的内部阴影

Html Internet Explorer 中的 <blink> 标签

Html Internet Explorer 中的 <blink> 标签

Html 用 div 设置背景颜色

Html 用 div 设置背景颜色

相关推荐
最近更新
标签