Question

我有一个显示百分比的文本框。我怎么能以某种方式掩盖（如果这是正确的词）文本框中的％符号，以便始终存在并始终到文本框的最右侧？

Answer 1

我首选的策略是将input和所需的标签包裹在div样式中，使其看起来像input，然后从input中删除输入样式。我不会在生产页面上以这种方式做宽度，但希望它能够朝着正确的方向发展。

＆＃13;

.wrapper {border: 1px solid gray; width:110px;}
input {border:none; width:90px;}
.label {width:10px;}

＆＃13;

<div class="wrapper">
  <input type="text" name="percent"/>
  <span class="label">%</span>
</div>

＆＃13;

Answer 2

你需要的是添加带有跨度的％并将其置于绝对左侧：0 top：0这应该是诀窍这是演示

.row{ float: left;    position: relative;}
span {    position: absolute;    right: 0;    top: 0;}

<div class="row"><input type="text" ><span>%</span></div>

Answer 3

这接近你之后的情况吗？

＆＃13;

.percent-wrapper {
  position: relative;
}
.percent-wrapper::after {
  content: "\%";
  position: absolute;
  right: .5rem;
  font-size: .9em;
  line-height: 1.5em;
}
.percent-wrapper input {
  text-align: right;
  padding-right: 1.5rem;
}

＆＃13;

<span class="percent-wrapper">
  <input type="text" placeholder="0">
</span>

＆＃13;

＆＃13; 更高级的解决方案是使用Bootstrap input-group，但我不会仅为此项目加载Bootstrap：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="input-group">
      <input type="text" class="form-control text-right" placeholder="0">
      <div class="input-group-addon">%</div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

您还可以为此fa-percent使用Font-Awesome图标。就这样做

1.`link to FontAwesome` 
2. in placeholder for `<input>` use the `placeholder = `HTML entity for fa-percent`
3. in your custom CSS give `font-family: FontAwesome;text-align:right;` to the input field

像这样

＆＃13;

input {
    font-family: FontAwesome;

    text-align: right;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

 <h1>This is How you do it </h1>
 <input type = "text" placeholder = "&#xf295;">

＆＃13;

将％强制放入文本框，右对齐

4 个答案: