普陀总校  北桥教学点  颛桥教学点  泗泾教学点  | 设为首页 | 加入收藏 | 官方微信
内威培训
打造“培训+就业”一站式服务品牌!
  • Web前端工程师
  • 电脑艺术设计师
  • 网页设计制作员
  • Java软件开发工程师
banner1

首页>>学员天地

解决span float:right不能右对齐而是换行显示
编辑:simon  阅读:1443次  发布:16-02-19

例子:
<h1 style="display:inline;">最新开班列表<span style="float:right;">更多...</span></h1>
这样的写法经过测试在IE8和firefox浏览器里可以正确显示在同一行,而在有些浏览器中"更多..."这几个字却显示到下一行的最右边。

原因:
  当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥。

  因此上例中,由于span是float:right,但是前面h1的内容"最新开班列表"还是float:none,因此使用得"更多..."显示到了下一行的最右边了。

解决:
一般有两个解决方法:

1、把<span style="float:right;">更多...</span>代码置于<h1>中文字的前面,即:
<h1 style="display:inline;"><span style="float:right;">更多...</span>最新开班列表</h1>

2、给前面的文本设置float属性
<h1 style="display:inline;"><span style="float:left">最新开班列表</span><span style="float:right;">更多...</span></h1>

按1的方法调整后显示如下:



上一篇: 关于内层DIV设置margin-top不起作用的解决方案   下一篇: css+div绘制三角形
网络大专、自考本科,学历轻松拿!
©2016-2020 万博体育APP 版权所有
普陀区武宁路1500号中楼2-3层(邮编:200062)
咨询:021-62434966  合作:021-13371929650  就业:021-62434966  传真:021-52662428  电邮:service@snetway.com
《中华人民共和国电信与信息服务业务》经营许可证沪ICP备15002602号