嗨,我有不同的风格,因为betwin labale和输入集的图标。请锁定在https://jsfiddle.net/mL1o0d5m/
CSS代码:
body{
font-family: tahoma;
font-size:14px;
background-color:#f1f1f1;
color:#999;
direction:rtl;
}
.form{
font-size:14px;
width:100%;
}
.form label{
text-align: right;
clear: both;
float:right;
}
.form input.inputs{
font-size:14px;
color:#999;
display:block;
border:1px solid #ccc;
border-right:none;
background-color:#fff;
width:80%;
margin-bottom:20px;
padding:10px;
padding-right:30px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-shadow:none;
-webkit-appearance: none;
}
.addon{
position:relative;
font-size:0;
}
.addon:before{
display:block;
content:"";
width:3px;
height:100%;
background-color:#3399cc;
position:absolute;
}
.icon:before{
font-size:14px;
color:#bbb;
position:absolute;
top:12px;
right:12px;
}
HTML:
<form class="form">
<label>Name</label>
<div class="addon">
<i class="icon fa fa-user"></i>
<input class="inputs" name="name" type="text" placeholder="Name" />
</div>
</form>
我想在同一行中设置标签和输入。标签应该在右边,输入和图标必须在左边。谢谢 。
像这样?
https://jsfiddle.net/mL1o0d5m/1/
这是实现此目标的众多可能性之一。
.form > label{ text-align: right; float:right; width:40px; margin-top:10px; }
在.icon:before和.addon:before中添加了一些CSS并
在小提琴中查看
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句