CSS：flexbox内的按钮宽度小于内容[重复]答案

【问题标题】：CSS: button inside flexbox has smaller width than the content [duplicate]CSS：flexbox内的按钮宽度小于内容[重复]
【发布时间】：2020-09-01 04:09:55
【问题描述】：

这是我的代码，我已经简化了结构。所以我们可以关注button和div的区别我不知道为什么button 中的文本会溢出并被裁剪。 button 不会长大以适应内容，但 div 会。（我在 Windows Chrome 上发现了这个问题，而 Firefox 似乎还可以）

我的解决方法是将button 替换为div。我想知道是否有人可以解释button 和div 之间的区别为什么div 同款没问题？

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flexbox {
            display: flex;
        }
        .btn {
            display: inline-block;
            background-color: #dc447d;
            border: 0 solid #dc447d;
            padding: 0 3%;
            line-height: 1.63em;
            font-size: 17.2px;
            color: white;
            border-radius: 5px;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="flexbox">
        <button class="btn">
            <span>Start Free Trial</span>
        </button>
    </div>
    <div class="flexbox">
        <div class="btn">
            <span>Start Free Trial</span>
        </div>
    </div>
</body>
</html>

【问题讨论】：

看来您的代码在 jsfiddle 上运行良好...
@huanfeng 我粘贴到jsfiddle上，结果好像和我第一次说的一样。如果我重新运行代码，它将正确呈现。我不知道为什么。
似乎奇怪的问题是由于您将填充设置为百分比值造成的。
这是一个 chrome 错误...在 Firefox 中运行良好

标签： html css flexbox

【解决方案1】：

将填充更改为数字值应该可以解决问题。

填充百分比基于父元素的宽度

padding: 0 10px

.flexbox {
  display: flex;
}

.btn {
  display: inline-block;
  background-color: #dc447d;
  border: 0 solid #dc447d;
  padding: 0 10px;
  line-height: 1.63em;
  font-size: 17.2px;
  color: white;
  border-radius: 5px;
  white-space: nowrap;
}

<div class="flexbox">
  <button class="btn">
      <span>Start Free Trial</span>
  </button>
</div>
<div class="flexbox">
  <div class="btn">
    <span>Start Free Trial</span>
  </div>
</div>

【讨论】：

谢谢，这是最接近的答案，它尽可能少地改变布局。但我仍然想知道有人能解释为什么 div 在这种情况下是可以的。

【解决方案2】：

看看这个sn-p：

.flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn {
    width: 100%;
    text-align: center;
    background-color: #dc447d;
    border: 0 solid #dc447d;
    padding: 0 3%;
    line-height: 1.63em;
    font-size: 17.2px;
    color: white;
    border-radius: 5px;
    white-space: nowrap;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="flexbox">
        <button class="btn">
            <span>Start Free Trial</span>
        </button>
    </div>
    <br>
    <div class="flexbox">
        <div class="btn">
            <span>Start Free Trial</span>
        </div>
    </div>
</body>
</html>

首先，我添加了额外的<br/> 只是为了以清晰的边框正确显示内容。

现在在 .flexbox css 中，justify-content: center; 和 align-items: center; 用于在 flex-box 的中心完美对齐内容。

此外，.btnwidth: 100%; 内部用于使内容宽度达到 flex-box 的 100%。您可以更改它，也可以根据需要使用 height: 100% 属性，为此您需要增加 flex-box 的高度。

最后text-align: center; 仅用于<div class="btn">，使其内容水平居中。

【讨论】：

我没有将按钮展开到全宽的原因是我实际上还有另一个按钮（为简单起见，我将其删除）。就我而言，我使用 justify-content: space-between 和 align-items: baseline 来排列两个元素。我知道完全扩展或添加flex-grow 可以解决，但这不是我想要的。

【解决方案3】：

.flexbox {
  display: inline flex;
}
.btn {
  display: inline-block;
  background-color: #dc447d;
  border: 0 solid #dc447d;
  padding: 0 3%;  
  line-height: 1.63em;
  font-size: 17.2px;
  color: white;
  border-radius: 5px;
  white-space: nowrap;
}

.

使用 inline flex 代替 flex 可以解决这个问题。

【讨论】：

谢谢，它似乎工作，而布局改变谁能解释奇迹？顺便说一句，应该是inline-flex

【解决方案4】：

这是我更新的解决方案here，我已经制作了我的 codepen 链接，请参考。

.btn {
  display: inline-block;
  background-color: #dc447d;
  border: 0 solid #dc447d;
  padding: 0 15px;
  line-height: 1.63em;
  font-size: 17.2px;
  color: white;
  border-radius: 5px;
  white-space: nowrap;
}

【讨论】：

你试过这个并让它工作了吗？将其添加到问题中的代码中没有任何区别，因此请更新您的答案以说明如何使其工作。
@FluffyKitten，是的，我已经在 codepen 中尝试过这个解决方案，它对我有用。
正如我所说，当添加到问题中的堆栈片段时它不起作用，所以请解释 OP 如何让它在他们的代码中工作。
@Riddhi，我也在 codepen 中尝试过你的建议，但没有成功
是的@Yung-DaLinLynda，你是对的，正如你之前所说，我尝试了我的最后一个解决方案，它不起作用，是的它有时会起作用，它没有，所以我实现了另一个这是......如果你完全删除填充它也可以工作......