在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:
bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行

  1. <ul>
  2. <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
  3. <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
  4. <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
  5. <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
  6. </ul>

产生原因分析: Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。 解决方案: 1. span和a标签交换位置.

  1. <ul>
  2. <li><span>2012</span><a>BEST SUSHI MENU</a></li>
  3. </ul>

缺点:语义结构发生改变,不合逻辑.
2.
a加左浮动,span加右浮动
3.
使用IE hack 在span标签中加入只有IE6,7可以识别的样式

  1. *margin-top:20px;
  2. _margin-top:20px;

说明,使换行的部分根据margin-top再呈现出来.
4.最佳方案

  1. li{position:relative;}
  2. li span{position:absolute ;right:0px;}

注:在li标签中使用positon:relative,在li span中使用absolute绝对定位来使span内容重新定位。

以上是转自别人的博客的解决方法。但是我试验了上边的方法,上边的方法能解决在IE中的问题,但是在webkit内核的浏览器中浏览又会出现同样的问题。

后来试了一下,发现把第二个方法稍微修改一下,两个都会兼容。

方法是按照上边的第二个方法,但是加完以后在a标签的float前加*,使该样式只能在IE中起作用。

#columnlist li a
{
*float: left;
}

ie下li标签中span加float:right不换行问题解决方案的更多相关文章

  1. LI 标签中让文章标题左对齐,日期右对齐的方法

    希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html  ...

  2. 用正则表达式抓取网页中的ul 和 li标签中最终的值!

                获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...

  3. div放在li标签中,无法撑开li标签的问题

    作为一个前端菜鸟,我又碰到问题了,今天把div放到li标签中,发现div并没有把li标签撑开,而是在li标签边界之外,具体情况如下图所示: 那么,怎样才能达到预期的效果(每个li中放置一个div标签, ...

  4. a标签中可以加button,但是不提倡;button中不能加a标签,否则不能跳转

    a标签中可以加button,但是不提倡:button中不能加a标签,否则不能跳转

  5. ie8下a标签中的图片出现边框

    1.ie8下a标签中的图片出现边框 <a href="#"><img src="horse.jpg"></a> 效果如图所示 ...

  6. bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除

    //该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel o ...

  7. css给span加float:right右浮动后内容换行下移

    转自:https://www.jb51.net/css/67309.html 在div css布局中 当span标签右浮动时会产生换行狭义的现象 <!DOCTYPE html PUBLIC &q ...

  8. IE6,7下li标签的间隙

    1.在IE6,7下li本身没浮动,但是li内容有浮动的时候,li下边就会产生3px的间隙. 解决办法: 1.给li加浮动 2.给li加vertical-align:top; eg: <!DOCT ...

  9. chrome下li标签onclick事件无效

    //绑定事件 $(document).ready(function () { $("ul").children().click(function () { clickLi(this ...

随机推荐

  1. Educational Codeforces Round 53 (Rated for Div. 2) C Vasya and Robot 二分

    题目:题目链接 思路:对于x方向距离与y方向距离之和大于n的情况是肯定不能到达的,另外,如果n比abs(x) + abs(y)大,那么我们总可以用UD或者LR来抵消多余的大小,所以只要abs(x) + ...

  2. cygwin的使用

    参考资料: 对话 UNIX: 在 Windows 上使用 Cygwin  Cygwin使用指南

  3. [转] 彻底搞懂word-break、word-wrap、white-space

    white-space.word-break.word-wrap(overflow-wrap)估计是css里最基本又最让人迷惑的三个属性了,我也是用了n次都经常搞混,必须系统整理一下,今天我们就把这三 ...

  4. Leetcode30--->Substring with Concatenation of All Words(主串中找出连接给定所有单词的子串的位置)

    题目:给定一个字符串S(主串),一个字符串数组words,其中的字符串的长度相同.找到所有的子串位置,要求是words中字符串的一个连接: 举例: For example, given:s: &quo ...

  5. LiveScript 流程控制、循环以及列表推导式

    The LiveScript Book     The LiveScript Book Generators and Yield 你可以在你的 LiveScript 代码中使用 Ecmascript ...

  6. Leetcode 476.数字的补数

    数字的补数 给定一个正整数,输出它的补数.补数是对该数的二进制表示取反. 注意: 给定的整数保证在32位带符号整数的范围内. 你可以假定二进制数不包含前导零位. 示例 1: 输入: 5 输出: 2 解 ...

  7. [python学习篇] uiautomator xiaocong

    Skip to content     This repository Pull requests Issues Marketplace Gist   Sign out       Watch103 ...

  8. Tinkoff Internship Warmup Round 2018 and Codeforces Round #475 (Div. 2)

    A. Splits time limit per test 1 second memory limit per test 256 megabytes input standard input outp ...

  9. Wannafly模拟赛3

    喜欢想飞啊,毕竟这里的题目还都算挺好的中文题,不过做英文题久了还是感觉英文题更好理解一点 反蝴蝶效应 时间限制:1秒 空间限制:65536K 题目描述 一只南美洲亚马孙河流域热带雨林中的蝴蝶,偶尔扇动 ...

  10. Set容器——HashSet及常用API

    Set容器特点: ①   Set容器是一个不包含重复元素的Collection,并且最多包含一个null元素,它和List容器相反,Set容器不能保证其元素的顺序; ②   最常用的两个Set接口的实 ...