html – 在所有浏览器中垂直对齐标签和文本框

发布时间:2020-08-01 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – 在所有浏览器中垂直对齐标签和文本框脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有一种简单的方法可以在所有主流浏览器中将标签与文本框对齐(即包括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*/
}

Demo

总结

以上是脚本之家为你收集整理的html – 在所有浏览器中垂直对齐标签和文本框全部内容,希望文章能够帮你解决html – 在所有浏览器中垂直对齐标签和文本框所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!