如何修复 display: inline-flex 缩放问题？

Question

当按钮中的文本超过一行时，: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>

Answer 1

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

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

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

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

Answer 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>

如何修复 display: inline-flex 缩放问题？

How to fix display: inline-flex scaling problem?

html

css

pseudo-element

flexbox