float垂直不对齐的问题

今天修改界面，要给一个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});