如何在输入密码箱中输入忘记链接？

Question

我想把链接＆＃34;忘记＆＃34;像这样：

但我无法做到这一点：

我尝试更改位置：绝对在css中链接

像这样的HTML：

<div>
                                <input id="txtPassword" type="password" class="textfield password" placeholder="Password" />
                                 <a id="lnkforget" class="hyperlink" style="float: right; margin-right: 5px;">Forgot</a>
                            </div>

我的演示：http://jsfiddle.net/d0joydmn/

Answer 1

您可以使用：

<div style="position: relative;">
    <input id="txtPassword" type="password" class="textfield password" placeholder="Password" />
    <a id="lnkforget" class="hyperlink" style="float: right; margin-right: 5px;position: absolute;top: 7px;right: 0px;">Forgot</a>
</div>

fiddle

在您的容器div position:relative和#lnkforget集合position:absolute中right: 0px。

在@quantumwannabe评论之后：

  

你可以添加padding-right：55px和box-sizing：border-box到   输入元素

Answer 2

我知道它有点老了，但也许有人需要这样做..我已经用这样的bootstrap 4完成了这个：

<div class="input-group mb-3">
    <input type="password" class="form-control border-right-style-none focus-none" placeholder="Password">
    <span class="input-group-addon focus-none" style="background: white; font-size: 80%;">
      <a class="small" href="/password/forgot">Forgot?</a>
    </span>
  </div>

和我用过的css类：

.border-right-style-none {
     border-right-style: none;
}

.border-left-style-none {
    border-left-style: none;
}

.focus-none {
    &:focus {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        outline: none !important;
        border-color: rgba(0, 0, 0, 0.15) !important;
    }
}

Answer 3

的 Demo:

[id=txtPassword]{
    width:200px;
    height:32px;
    border:2px solid red;
    border-radius:4px;
}

[id=txtPassword] +  [id=lnkforget]{
    margin-left:-72px;
    padding:2px 10px;
    background:red;
    transition:margin-left 300ms ease;
    border-radius:4px;
}

[id=txtPassword]:focus +  [id=lnkforget]{
   margin-left:12px; 
}

标记：

<input id=txtPassword type=password class="textfield password" placeholder="Password" />
<a id=lnkforget class=hyperlink>Forgot</a>