li span兼容性问题
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兼容性问题的更多相关文章
- div,li,span自适应宽度换行问题
<ul class="news"> <li><span class="lbl">右对齐,换行显示的解决方法</s ...
- ul li span addClass removeClass
<link type="text/css" href="./style/css/base.css" rel="stylesheet"& ...
- li中包含span,在IE6、IE7下会有3pxbug
如果给每个li里面加个span标签的话,在IE6,IE7下看,li与li之间的距离就会多了3px. 解决方法:在li中加vertical-align:middle; <div class=&qu ...
- ie下li标签中span加float:right不换行问题解决方案
在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- IE兼容性问题
1.H5标签兼容.解决:js:document.createElement("footer");css:display: block;或者直接使用 html5shiv.js ...
- CSS常见问题及兼容性
CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script> ; ; ; ;;;};;;;;;;; ...
- IE浏览器兼容性问题解决方案
一.CSS常见问题 1.H5标签兼容性 解决方案:<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.j ...
- 关于li元素嵌套的事儿
今天阅读<锋利的jQuery>第二版2.6节案例研究部分的时候,遇到一个问题. <ul> <li class="a1"><a href=& ...
随机推荐
- Delphi下重载窗体CreateParams翻转关闭按钮
type TForm1 = class(TForm) private { Private declarations } public { Public declarations } ...
- node.js 入门教程(beginnder guide
非常好的教程: node入门: JavaScript与Node.js JavaScript与你 简短申明 服务器端JavaScript “Hello World” 一个完整的基于Node.js的web ...
- C语言的本质(6)——位运算
位运算是指按二进制进行的运算.在系统软件中,常常需要处理二进制位的问题.C语言提供了6个位操作运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符号的char,short,int与long类型 ...
- 【转】使用Navicat for Oracle新建表空间、用户及权限赋予
首先.我们来新建一个表空间.打开Navicat for Oracle,输入相关的的连接信息.如下图: 填入正确的信息,连接后.我们点击面板上的“其他”下的选项“表空间”,如下图: 进入表空间的界面,我 ...
- android入门——BroadCast(2)
自定义广播 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=&q ...
- CRM setValue方法日期类型字段赋值
setvalue datetime 赋值 得到“/Date(14000023232323)/” 这样的值 需要把 /去掉 var dd = Result.yt_purchase_date.subst ...
- WindowsService服务的C#实现
WindowsService(简称服务,下同)是目前做客户端软件后台运行功能的非常好的选择,本文基本解决了服务的创建和编写,代码控制服务的安装.卸载.启动.停止等,为服务传递参数,其他注意事项等 1. ...
- C# 调用其他的动态库开发应注意的问题
1.背景 程序开发语言可以说是五花八门,这就引出了一个新问题 ,不同语言开发的系统进行对接时相关调用的问题. 下面我主要说一下我自己在做接口开发时遇到的问题及解决方法仅供参考,我使用的C#开发进行对接 ...
- java代码如何快速添加作者描述的注释最好能有详细的图解
MyEclipse 中自动插入作者.注释日期等de快捷键方法依次打开然后找到 Window -->Preferences->Java->Editor->Templates,在这 ...
- [C++空间分配]new运算符、operator new、placement new的区别于联系
先科普一下: 1. new的执行过程: (1)通过operator new申请内存 (2)使用placement new调用构造函数(内置类型忽略此步) (3)返回内存指针 2. new和malloc ...