有时候我们想写个浮动得到这样的效果：

代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

*{margin:0;

padding:0;}

a{

	text-decoration:none;

	color:#333333;

	line-height:1.7em;}

.main_c{

	list-style:none;

	font-size:14px;

	width:400px;

	height:50px;}

.main_c li{

	float:left;

	margin-right:10px;

	}

</style>

</head>

<body>

<ul class="main_c">

<span style="white-space:pre">	</span><li><a href="#">豪门替身：总裁别嚣张</a></li>

<span style="white-space:pre">	</span><li>|</li>

<span style="white-space:pre">	</span><li><a href="#">蛮荒征战:唯我称王</a></li>

<span style="white-space:pre">	</span><li>|</li>

<span style="white-space:pre">	</span><li><a href="#">毒妇重生：惩恶妹斗渣男</a></li>

<span style="white-space:pre">	</span><li>|</li>

<span style="white-space:pre">	</span><li><a href="#">最强兵王：我的靠山最硬</a></li></ul>

</body>

</html>

可是在IE7和IE6下得到的结果却是这样的：

解决办法很简单，给li标签加一个white-space属性即可：

<span style="font-size:18px;"><!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

*{margin:0;

padding:0;}

a{

	text-decoration:none;

	color:#333333;

	line-height:1.7em;}

.main_c{

	list-style:none;

	font-size:14px;

	width:400px;

	height:50px;}

.main_c li{

	float:left;

	margin-right:10px;

	white-space:nowrap;}

</style>

</head>

<body>

<ul class="main_c">

<span style="white-space:pre">	</span><li><a href="#">豪门替身：总裁别嚣张</a></li>

<span style="white-space:pre">	</span><li>|</li>

<span style="white-space:pre">	</span><li><a href="#">蛮荒征战:唯我称王</a></li>

<span style="white-space:pre">	</span><li>|</li>

<span style="white-space:pre">	</span><li><a href="#">毒妇重生：惩恶妹斗渣男</a></li>

<span style="white-space:pre">	</span><li>|</li>

<span style="white-space:pre">	</span><li><a href="#">最强兵王：我的靠山最硬</a></li></ul>

</body>

</html>

</span>

white-space：设置如何处理元素内的空白

可能的值

值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

IE7下浮动元素的内容自动换行的BUG解决方法的更多相关文章

  1. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  2. 原生js在IE7下 向dom添加节点的一个bug, (本例为添加hidden input)

    需求是要用js向dom结构增加1个hidden用来存放要post到服务器的数据 var aspnetForm = document.getElementById("aspnetForm&qu ...

  3. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  4. 【配置】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法（非简单设置为【经典】模式）。

      ×   检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 5 ...

  5. li浮动引起ul高度坍陷的解决方法

    我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...

  6. linux下安装Oracle时交换空间不足的解决方法

    摘:linux下安装Oracle时交换空间不足的解决方法 linux上安装Oracle时交换空间不足的解决办法 增加交换空间有两种方法: 严格的说,在系统安装完后只有一种方法可以增加swap,那就是本 ...

  7. extjs folder is lost解决方法 和 FineUI主题切换时 iframe内的内容主题不变的解决方法

    错误原因:extjs包和FineUI版本不一致 或者是 webconfig配置中 没有设置为任何人可访问  解放方法下载和FineUI版本相同的extjs包就ok了 解决方法:FineUI主题切换时 ...

  8. win7下安装Ubuntu后进不去win7的解决方法

    win7下安装Ubuntu后进不去win7的解决方法 刚刚给同学在win7下安装了Ubuntu16.04,结果在安装完后竟然无法在电脑重启后,找到win7的进入选项. 在网上找了找,都不行!就差点重装 ...

  9. Windows win7下VMware Virtual Ethernet Adapter未识别网络解决方法

    win7下VMware Virtual Ethernet Adapter未识别网络解决方法[摘] by:授客 QQ:1033553122 问题描述 win7系统下安装VMware,查看网卡适配器设置, ...

随机推荐

  1. EntityFramework、Dapper vs 草根框架性能

    EntityFramework.Dapper vs 草根框架性能 扯淡 当前市面上 ORM 很多,有跑车型的,如 Dapper,有中规中矩型的,如 Mybatis.Net,也有重量型的,如 Entit ...

  2. 关于ODI agent的配置部署

    分类: Linux 最近,做了几个ODI项目的部署,发现ODI agent所在的位置对整个E-LT工作的影响还是比较大的,根据Oracle的官方说法,agent一般需要部署在目标端的数据库服务器上,或 ...

  3. Android程序的入口点

    原文:Android程序的入口点 android应用程序,由一到多个Activity组成.每个Activity没有很紧密的联系,因为我们可以在自己的程序中调用其它Activity,特别是调用自己的代码 ...

  4. [原]CAS和Shiro在spring中集成

    shiro是权限管理框架,现在已经会利用它如何控制权限.为了能够为多个系统提供统一认证入口,又研究了单点登录框架cas.因为二者都会涉及到对session的管理,所以需要进行集成. Shiro在1.2 ...

  5. [置顶] ProcessOn:划时代性的在线作图工具

    ProcessOn是一款专业作图人员的社交网络,这里汇聚很多业界专家.学者,同时他们分享的作品又形成一个庞大的知识图库,你在学习专业知识的同时还可以结交一些志同道合的新朋友. ProcessOn核心设 ...

  6. 2016 Multi-University Training Contest 8 总结

    回家之后一堆的事情,最后两场多校都没怎么参加,终于现在有些时间可以把第八场的总结补上. 欣君开局看出06题公式,我照着写,一A,差一分钟拿到FB,有点可惜. 磊哥觉得11题水题,写了一下,一A. 欣君 ...

  7. Vxlan 原理

    https://www.gitbook.com/book/yeasy/openstack_understand_neutron/details 自己总结一下: 分析 VTEP的情况, 即Vxlan跟V ...

  8. ceph伦理概念

    Preface: CEPH: THE FUTURE OF STORAGE(未来存储) Ceph was made possible by a global community of passionat ...

  9. 雕爷牛腩这样判断零售未来-搜狐IT

    雕爷牛腩这样判断零售未来-搜狐IT 雕爷牛腩这样判断零售未来

  10. css3 选择器的比较(一) -- 以字符串开头

    一.  以“字符串”开头 两种用法的区别是: a. 以字符串开头,需要用"-"分割开, b. 以字符串开头,不需要任何分隔符 1. 资料 a) b)  2. html代码 < ...