html - 如何将忘记链接放入输入密码框中？

Question

我想将链接“忘记”，如下所示:

但我无法实现这一目标:

我尝试更改链接的CSS中的position:absolute

像这样的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 为 右:0px。

也在 @quantumwannabe 评论之后:

you can add padding-right: 55px and box-sizing: border-box to the input element