是否有一种简单的方法可以在所有主流浏览器中将标签与文本框对齐(即包括IE7?我将显示设置为标签上的内联块和文本框,这似乎适用于IE7,其中标签位于底部div.
<label class="inputLabel" for="emailTextBox"> Email:</label> <input class="textBox" type="text" id="emailTextBox" value=" Email address" /> input.textBox { margin-top: 5px; margin-bottom: 5px; height: 30px; width: 350px; font-size: 15px; font-family: Verdana; line-height: 30px; display:inline-block; } label.inputLabel { font-family: Verdana; font-size: 15px; line-height: 30px; display:inline-block; }
解决方法
显示:内联块声明不是IE7及以下的
fully supported,所以你必须使用display:inline而不是zoom:1 hasLayout hack模仿声明与明星hack以IE7为目标.要对齐文本框和标签,我们可以使用vertical-align:middle属性,如下所示:
CSS
input.textBox { margin-top: 5px; margin-bottom: 5px; height: 30px; width: 350px; font-size: 15px; font-family: Verdana; line-height: 30px; display:inline-block; *display: inline; /* for IE7*/ zoom:1; /* for IE7*/ vertical-align:middle; } label.inputLabel { font-family: Verdana; font-size: 15px; line-height: 30px; display:inline-block; *display: inline; /* for IE7*/ zoom:1; /* for IE7*/ }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。