Question

我有一个输入字段文本框，其中％朝左对齐，值朝右对齐，并且输入框被禁用。如何使用HTML和CSS实现此目的。它看起来应该像附加的图像。 enter image description here 我已经尝试了以下代码。

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

Answer 1

我尝试了与您在图片说明中提到的内容接近的内容。好吧，这可以使用'span'标签完成。使用'div'标签可以实现类似的效果，但是在出于样式目的对元素进行分组时，应使用'span'标签（在某些特定情况下，内嵌标签比块级标签更可取）这些）。

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

<span class="percentinput">%<input disabled type="text" placeholder="33.6" ></span>

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

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

2 个答案: