如何修复显示：inline-flex 缩放问题？ [复制]答案

【问题标题】：How to fix display: inline-flex scaling problem? [duplicate]如何修复显示：inline-flex 缩放问题？ [复制]
【发布时间】：2020-05-01 23:44:23
【问题描述】：

当按钮中的文本超过一行时，:after 的缩放存在问题。这是display: inline-flex 的业务。有谁知道如何解决这个问题？ div box 的小宽度是必要的。请帮忙。

.box {
    width: 300px
}

.button {
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    display: inline-flex;
    padding: 5px 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid #004FA3;
    min-width: 135px;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
}

.button::after {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    min-height: 21px;
    background-image: url(https://svgshare.com/i/HJM.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: right;
    margin-left: 13px;
}

<div class="box">
  <a class="button">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  </a>
  <hr>
  <a class="button">
    Lorem ipsum 
  </a>
</div>

【问题讨论】：

我认为您需要使用 position:absolute 表示 AFTER。使用 ABSOLUTE 100% 即可解决。
不需要职位：绝对。将 flex-shrink:0 添加到伪元素

标签： html css flexbox pseudo-element

【解决方案1】：

尝试使用position: absolute。我添加到您的代码中的代码：

.button {
    position: relative;
    padding-right: 40px;
}

.button::after {
    position: absolute;
    right: 20px;
}

*请注意，例如。 padding-right 应该在你的padding 之后，否则会被覆盖

【讨论】：

【解决方案2】：

您需要将位置 ABSOLUTE 添加到您的 AFTER 并添加位置 RELATIVE 到您的 BUTTON。

我更新了你的代码。让我看看这是否对你有帮助。

.box {
    width: 300px
}

.button {
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    display: inline-flex;
    padding: 5px 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid #004FA3;
    min-width: 135px;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    position:relative;
}

.button::after {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    min-height: 21px;
    background-image: url(https://svgshare.com/i/HJM.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: right;
    margin-left: 13px;
    position: absolute;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    right:10px;
}

<div class="box">
  <a class="button">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  </a>
  <hr>
  <a class="button">
    Lorem ipsum 
  </a>
</div>

【讨论】：