<
style
>
form{
width:
400px;
padding:
20px
0;
margin:
0
auto;
}
form >
label{
display:
inline-block;
width:
100%;
}
form>
label>
*{
float:
left;
line-height:
24px;
}
form>
label>
span{
display:
inline-block;
width:
100px;
height:
24px;
text-align:
justify;//设置文字段落的两端对齐,此处为划重
}
form>
label>
input{
display:
inline-block;
}
i{
display:
inline-block;//i在页面的的中填充文字间的距离。图一为具有CSS样式的i,图二无
width:
100%;
}
<
/
style
>
<
form
>
<
label
for=
""
><
span
>用户名1:
<
i
></
i
></
span
><
input
type=
"text"
></
label
>
<
label
for=
""
><
span
>密222码:
<
i
></
i
></
span
><
input
type=
"text"
></
label
>
<
label
for=
""
><
span
>年3龄:
<
i
></
i
></
span
><
input
type=
"text"
></
label
>
</
form
>
图一:
图二: