在输入文本字段中添加填充以防止重叠

Question

所以我目前有以下代码:

我遇到的麻烦是我输入的值与百分号重叠.我不知道如何添加一些填充或对齐以防止重叠.

有任何想法吗？

.percentBlock {
    width: 1500px;
}

.percentageSign {
    position: relative;
    right:20px;
}

<span class="percentBlock">
    <input type="number" max="100" accuracy="2" min="0" style="text-align:right;">
<span class="percentageSign">%</span></span>

Answer 1

您可以使用以下解决方案,因此将%其放在数字控件之后:

.percentBlock {
  width: 1500px;
}
.percentBlock input[type=number] {
  padding-right:20px;
}
.percentageSign {
  position: relative;
  right:20px;
}

<span class="percentBlock">
  <input type="number" max="100" accuracy="2" min="0" style="text-align:right;">
  <span class="percentageSign">%</span>
</span>