float垂直不对齐的问题_float 垂直对齐-优快云博客

本文介绍了一种解决按钮在页面布局中位置偏移的方法。通过使用额外的span元素和CSS样式调整，使按钮能够正确地显示在div右侧，同时保持与文本在同一水平线上，并解决了在IE7浏览器中的兼容性问题。

今天修改界面，要给一个div添加一个按钮，在右侧。html代码如下

<div class="myPanel">
		<span>我的面板</span>
                  <input name="input" type="button" class="arrowUp" value=" " />
</div>

说明：input的class属性指定的是一张按钮图片。

给input添加了float:right的话，按钮会飞到div右上角，而“我的面板”是靠左垂直对齐居中显示的，这样的话按钮和文字就不在一行了，不美观，

后来的解决办法是给input用另一个span围起来，html代码如下：

<div class="myPanel">
	<span>我的面板</span>
     <span class="arrowPosition">
     <input name="input" type="button" class="arrowUp" value=" " />
    </span>
</div>

css样式如下：

.arrowPosition{padding-top:5px; float:right;}

这个padding-top的值根据实际情况修改。

另外，在IE7下按钮会飞出DIV，所以要给div块添加一个样式：overflow:auto;

番外：

jquery修改class属性的时候，属性名要写className否则ie无法识别：

$(XXX).attr({className:XXX});