如何在单个输入字段中放置 % 和值答案

【问题标题】：How to place % and value in a single input field如何在单个输入字段中放置 % 和值
【发布时间】：2019-10-24 16:00:33
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

我尝试了与您在图片描述中提到的内容相近的方法。好吧，这可以使用“跨度”标签来完成。使用“div”标签也可以实现类似的效果，但是在为样式目的对元素进行分组时，应该使用“span”标签（在某些特定情况下，内联标签比块级标签更可取，例如这些）。

.percentinput {
    border: 1px inset #ccc;
  }
.percentinput input {
    text-align: right;
    border: 0;
  }

&lt;span class="percentinput"&gt;%&lt;input disabled type="text" placeholder="33.6" &gt;&lt;/span&gt;

【讨论】：

支持使用更少的代码和样式

【解决方案2】：

在这里

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; 
}

【讨论】：

快乐是我的，亲爱的 :) 干杯！