先来看看最终的效果:
这里主要关注如何将“用户名”“请设置密码”以及他们紧跟的input元素设置为图中的对齐样式。
先来看看html代码:
1 <div class="item"> 2 <label><span>*</span>用户名:</label><input type="text" name="nick" id="nick"/> 3 </div> 4 <div class="item"> 5 <label><span>*</span>请设置密码:</label><input type="password" name="psw"/> 6 </div>
注意为什么要使用label来包裹“用户名”“请设置密码”,马上就会用到,css代码如下:
1 .item > label{ 2 display:inline-block; 3 width:290px; 4 text-align:right; /* 这句话是对齐的关键 */ 5 color:#999; 6 }
注意这里对label使用了inline-block属性值,也就是说可以将这个本身是行内元素的label当成块级元素来调整宽高,同时保留了行内元素不会换行的特性,让这个label和后面的input在一行中显示,这个是完成对齐的前提;
其次,将label设置为text-align:right来使label内的文字向右边缘紧靠,从而视觉效果上达到文字和input紧靠的目的,所以这里只需要将包裹“用户名”和“请设置密码”的两个label的width设置一样就能对齐了!
时间: 2024-10-23 04:39:21