html:
<div class="leave"> <h1>发表评论</h1> <hr /> <ul> <li><label>昵称/Username:</label><input type="text" name="username"></li> <li><label>电子邮件/Email: </label><input type="text" name="mail"></li> <li><label>内容/Message:</label><textarea></textarea></li> </ul> <small> <input type="button" value="评论"></small> </div>
css:
.content .leave ul li{ list-style: none; height: 100px; width: 700px; line-height: 100px; border-bottom: 1px dashed #D9D9D9; } .content .leave ul li input{ width: 200px; height: 28px; margin-left: 10px; height: 28px; line-height: 28px; } /*.ie6.content .leave ul li label{ display: inline-block; border: 1px solid red; }*/ .content .leave ul li label{ font-size: 16px; margin-left: 100px; } .content .leave ul li textarea{ margin-left: 20px; width: 400px; height: 70px; }
ie6以上和其它都正常:
在ie6是是这样的:
修正后的样式:只要在label标签加上display: inline-block;就可以了
.content .leave ul li{ list-style: none; height: 100px; width: 700px; line-height: 100px; border-bottom: 1px dashed #D9D9D9; } .content .leave ul li input{ width: 200px; height: 28px; margin-left: 10px; height: 28px; line-height: 28px; } /*.ie6.content .leave ul li label{ display: inline-block; border: 1px solid red; }*/ .content .leave ul li label{ display: inline-block; font-size: 16px; margin-left: 100px; } .content .leave ul li textarea{ margin-left: 20px; width: 400px; height: 70px; }
本文出自 “Freax” 博客,请务必保留此出处http://freax.blog.51cto.com/6614733/1380299
让li里面的元素垂直居中的方法,布布扣,bubuko.com
原文:http://freax.blog.51cto.com/6614733/1380299