如何在引导程序中将静态文本添加到输入框？

Question

我有一个HTML如下：

<div class="row">
 <div class="col-lg-4">
  <label for="email">E-Mail ID:</label>
 </div>
 <div class="col-lg-8 input-group" style="width:50%">
  <input type="text" id="userEmail" class="form-control" name="email" required />
  <span class="input-group-addon">@gmail.com</span>
  <hr/>
 </div>
</div>

我想在右侧的方框内添加静态文字。

例如（@ gmail.com，它在谷歌注册表单上的方式检查图片）。 非常感谢！

Answer 1

这样的东西？

＆＃13;

＆＃13;

user

＆＃13;

.input-group input {
  border-right: 0px solid transparent;
}

.input-group .input-group-addon {
  background-color: transparent;
  border-left: 0px solid transparent;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

将范围移到input上，并设置input span的大小 insert into table1 select * from ( select #temp.workersID,#temp.W_name,#temp.salary,#temp.joining_year,#temp.city,#temp.id from #temp full join workers on #temp.WorkersID = workers.WorkersID where workers.WorkersID is null ) ds 的正确填充：https://jsfiddle.net/d65wyzoj/1/

Answer 3

试试这个

.new
{
  position: absolute;
  padding: 10px;
  right: 0px;
  line-height: 10px;
}



 <div class="form-group ">
    <label class="control-label">
      <code>.inner-addon.<i>right</i>-addon</code>
    </label>
    <div class="inner-addon right-addon">
      <span class="new">@gmail.com</span>
      <input type="text" class="form-control" placeholder="Search" />
    </div>
  </div>

Answer 4

这是您可以找到的最优雅的解决方案。

http://jsfiddle.net/t9ySU/

<div class="input-container">
    <input type="text"/>
</div>

.input-container {
    position: relative;
    float: left;
}
.input-container:after {
    position: absolute;
    right: 0;
    top: 0;
    content: '@gmail.com';
}