首页 > 技术文章 > label和input里面文字不对齐的解决方法!

may-374 2014-03-25 13:57 原文

 

测试了集中方法,发现不行。只能用专署标签解决这个问题。

<fieldset>
    <legend>神光咨询后台管理登录</legend>
    <br />
      <label>管理员</label>
      <input type="text"/><br />
      <label>密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
      <input type="text"/><br />
      <label>安全码</label>
      <input type="text"/><br />
      <label>验证码</label>
      <input type="text"/>&nbsp;&nbsp;<img alt="点击刷新验证码" id="imgCheckCode" width="80" height="20" style="CURSOR: pointer" src="CheckCode.aspx" onclick="CheckCode()" align="absmiddle" />
    </fieldset>

      <p><input type="submit" name="submit"value="登录" class="putbutton" />&nbsp;&nbsp;<input type="submit" name="submit" value="取消" class="putbutton" /></p>

IE8下面 input和label里面的文字是自然对齐的。但是ie6和ie7完全不正确,很多人的操作方法可能是将文字和input框分开分别放置到2个不同的div里面去解决。后来看了一下,没有必要采用这种方式。用hack解决就可以了。

so

input{width:150px;border:1px solid #66838c;margin:0 0 6px 0;*+vertical-align:bottom;_vertical-align:middle;}

这个是主要代码。利用“*+”,来专署定义IE7,利用“_” 来专署定义IE6。 定义过程中必须先将IE7放置到前面,IE6放置到后面,根据偏移量的不同选择上下浮动关系。 vertical-align:bottom ;由于我使用了高度比较合适这个,所以选择了bottom,正常情况 middle就行!

推荐阅读