我正在设计登录页面。在这里我添加了用户名和密码的图标,当我添加图标时,一些其他图标也添加了如何解决这个问题。这是我的代码。
<div class="left-inner-addon ">
<i class="icon-user"></i>
<input type="text" placeholder="User Name" name='j_username' >
</div></div>
且CSS如下,
<style type="text/css">
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 30px;
}
.left-inner-addon i {
position: absolute;
padding: 10px 12px;
pointer-events: none;
}
</style>
我没有声誉张贴照片的登录形式。
3条答案
按热度按时间83qze16e1#
我得到了你所面临的想法,根据Twitter Bootstrap的当前标准,你只需要使用下面的代码来实现你想要的。我已经测试了它在现场服务器,它是工作正常。只需替换您的HTML代码以下代码:
我希望这能帮上忙。
velaa5lx2#
我正在为你的问题写一个新的答案。按照这个代码。这肯定会有帮助。
以下是文本框的HTML:
下面是左侧图像的CSS:
下面是右侧图像的CSS:
8iwquhpp3#
带 Bootstrap 2.3.2
HTML语言
<div class="left-inner-addon "> <i class="icon-user"></i> <input type="text" class="form-control" placeholder="User Name" name='j_username' > </div>
CSS
JSFFIDLE