html - 如何在单个输入字段中放置％和值

我有一个输入字段文本框，它的%向左对齐，值向右对齐，并且输入框被禁用。如何使用HTML和css实现这一点。它应该看起来像附加的图像。
enter image description here
我试过下面的代码。

<div>
      <input disabled class="averagePrice" [value]="3.99" />
    </div>

最佳答案

给你。
HTML。

<div class="input-icons">
  <i class="icon"> % </i>
  <input disabled class="input-field" type="text" value="33.6">
</div>

CSS

.input-icons i {
  position: absolute;
}
.input-icons {
  width: 100%;
  margin-bottom: 10px;
  position: relative;
}
.icon {
  padding: 10px;
  color: green;
  min-width: 20px;
  text-align: center;
}

.input-field {
  padding: 10px;
  text-align: right;
}

关于html - 如何在单个输入字段中放置％和值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58535153/