解决IE8下,float右浮动不能与前面元素显示在同一行
2017-08-09 11:36
274 查看
问题图片(需要的效果是,返回按钮与项目名称在同一行,并且靠右):
![](https://img-blog.csdn.net/20170809113207880?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmdmZW5nMjEyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
原因:
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥
解决方案:
将按钮在所在html标签放到项目名称前面
解决后图片:
![](https://img-blog.csdn.net/20170809113201554?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmdmZW5nMjEyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
代码:
<div class="bk-search" style="padding-top: 0px; padding-bottom: 0px;height: 30px;vertical-align: middle;line-height: 30px;">
<span style="float: right;margin-top: 3px;"><button style="width: 60px;line-height: 20px;" type="button" class="button" onclick="FH()">返回</button></span>
<span>项目名称:<s:property value="queryBean.pc.name"/></span>
</div>
原因:
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥
解决方案:
将按钮在所在html标签放到项目名称前面
解决后图片:
代码:
<div class="bk-search" style="padding-top: 0px; padding-bottom: 0px;height: 30px;vertical-align: middle;line-height: 30px;">
<span style="float: right;margin-top: 3px;"><button style="width: 60px;line-height: 20px;" type="button" class="button" onclick="FH()">返回</button></span>
<span>项目名称:<s:property value="queryBean.pc.name"/></span>
</div>
相关文章推荐
- 子元素float之后父级div不能被撑开(清浮动)的解决
- IE float浮动 子元素不能撑开父容器 解决办法
- 解决子级用css float浮动 而父级div没高度不能自适应高度
- 解决float浮动定位时父元素的高度为0的情况
- JS获取浮动(float)元素的style.left值为空的快速解决办法
- 利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题
- 子元素浮动父容器高度不能自适应的CSS解决方法
- 解决浮动元素不在一行
- 解决内部容器float浮动后不能撑开外部容器及CSS伪类:after的使用
- 关于Delphi中RS Float字段只有4位及OADateTime不能显示到秒的解决办法
- UL里的LI元素左浮动层一行显示时使其居中的方法
- 解决子级用css float浮动 而父级div没高度不能自适应高度
- 清除浮动-解决父级元素高度不能适应子级元素高度的问题
- 解决子级用css float浮动 而父级div没高度不能自适应高度
- IE7 float:right 右浮动时元素换行错位的bug解决方法
- wamp目录前面的小图标不能显示问题解决
- 解决子级用css float浮动 而父级div没高度不能自适应高度
- 子元素浮动父容器高度不能自适应的CSS解决方法
- IE8不能居中显示的5个解决办法~~亲测center可用~