li与span的搭配使用所产的浏览器兼容性问题

1.ls两位,设定了width还是没用。
2.总结了一下就是,里面的标签漂浮以后,就不能撑起外层的容器了。

3.li要设至少一个宽度或高度,还要加上overflow:hidden,这样里面的元素就不会跑外面去了

span本身虽然是内敛元素但是加上浮动以后,就变成了块级元素。所以才会自动换行,浮动元素的顶端,不能高于先于它出现的浮动元素或段落顶端

我们常常在做网站的时候会div,li,span中加入span右对齐,例如:文章列表中在我们会加入时间让它右对齐,以增加网页的可读性,如下代码:
html如下:

  • span右对齐,换行显示的解决方法2010-8-26

css:.news ul li span{float:right;}
不过问题又来了,往往我们在一个块中加入span时就会发现在网页中预览时span换行右对齐了,那么这是为什么呢?
原来是因为:当非float元素和float元素在一起的时候,假如非float元素在前,那么float元素将被排拆,所以,即使span是float:right,但文本显示是float:none,所以span将被排斥。
不换行的解决方法:
一、把span先于文本显示
<<ul class="news">
    <<li>2010-8-26span右对齐,换行显示的解决方法>
l>

二、让文本float:left

  • <<ul class="news">
    <<li>span右对齐,换行显示的解决方法2010-8-26
  • >
    l>

<.fl {float:left;}>
<.fr{float:right;}>
第二种方法没有第一种方法简单,为了网页代码的简洁性,建议采用第一种方法。

li span兼容性问题的更多相关文章

  1. div,li,span自适应宽度换行问题

    <ul class="news">    <li><span class="lbl">右对齐,换行显示的解决方法</s ...

  2. ul li span addClass removeClass

    <link type="text/css" href="./style/css/base.css" rel="stylesheet"& ...

  3. li中包含span,在IE6、IE7下会有3pxbug

    如果给每个li里面加个span标签的话,在IE6,IE7下看,li与li之间的距离就会多了3px. 解决方法:在li中加vertical-align:middle; <div class=&qu ...

  4. ie下li标签中span加float:right不换行问题解决方案

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

  5. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  6. IE兼容性问题

    1.H5标签兼容.解决:js:document.createElement("footer");css:display: block;或者直接使用    html5shiv.js ...

  7. CSS常见问题及兼容性

    CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script>  ; ; ;                    ;;;};;;;;;;;       ...

  8. IE浏览器兼容性问题解决方案

    一.CSS常见问题 1.H5标签兼容性 解决方案:<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.j ...

  9. 关于li元素嵌套的事儿

    今天阅读<锋利的jQuery>第二版2.6节案例研究部分的时候,遇到一个问题. <ul> <li class="a1"><a href=& ...

随机推荐

  1. Topo软件

    http://jung.sourceforge.net/#! http://www.netdisco.org/ http://sourceforge.net/projects/toponet/ htt ...

  2. SPI模式下MCU对SD卡的控制及操作命令

    一.前言 SD 卡有两个可选的通讯协议:SD 模式和 SPI模式 SD 模式是SD 卡标准的读写方式,但是在选用SD 模式时,往往需要选择带有SD 卡控制器接口的 MCU,或者必须加入额外的SD卡控制 ...

  3. javascript第十二课array数组

    数组的声明方式: var add=new array(元素1,元素2,元素3......); 推荐的数组声明方式: var add=[元素1,元素2,元素3,元素4....]; 数组遍历方式: 循环遍 ...

  4. iOS 的 APP 如何适应 iPhone 5s/6/6Plus 三种屏幕的尺寸?(转)

    原文:http://www.niaogebiji.com/article-4379-1.html?utm_source=tuicool 初代iPhone 2007年,初代iPhone发布,屏幕的宽高是 ...

  5. BestCoder Round #14

    Harry And Physical Teacher Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  6. iOS音频播放(一):概述

    (本文转自码农人生) 前言 从事音乐相关的app开发也已经有一段时日了,在这过程中app的播放器几经修改,我也因此对于iOS下的音频播放实现有了一定的研究.写这个 系列的博客目的一方面希望能够抛砖引玉 ...

  7. navigationController显示隐藏问题

    今天遇到设置: self.navigationController.navigationBarHidden= YES; 点击返回上一个UIViewController的时候这个时候这个navigati ...

  8. document.body is null

    document.body is null:做前端的同学们对这个错误应该不陌生吧 出现这个问题的原因是:你太着急了,document还没渲染到body呢,你就想调用了,当然会找不到了 解决办法so e ...

  9. MySql5.6Window超详细安装教程(msi 格式的安装)

    转自:红黑联盟  http://www.2cto.com/database/201506/409821.html 一.安装包准备 1.下载MySql5.6 http://www.mysql.com/ ...

  10. ShowDialog()弹出的窗体,关闭后,主窗体会闪烁的BUG

    如图,要实现下列等待界面时,等待界面是以ShowDialog弹出的,发现关闭后,主窗体会闪烁一下的BUG,搞半天没搞明白啥原因. 过了几天后,搜索了下发现,在fm.ShowDialog(),显示出来时 ...