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

代码：

<!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. Ubuntu 12.04 Android2.2源码make** /classes-full-debug.jar Error 41错误解决

    出现make: *** [out/target/common/obj/APPS/CMParts_intermediates/classes-full-debug.jar] Error 41这样的错误最 ...

  2. Oracle当前用户SQL

    select sesion.sid,sesion.serial#,sesion.username,sesion.sql_id,sesion.sql_child_number,optimizer_mod ...

  3. WIN7 64位通过VPN远程登录 ASP.Net通过VPN访问Oracle服务器

    因为客户这边的服务器是64位的,所以本人手贱,把系统换成了64位的win7,以为来客户这边工作会更方便,谁知道来到客户这边,进不了他们公司的内网,然后给我一个VPN的账号,先VPN然后才能登录他们的测 ...

  4. UVA1351-----String Compression-----区间DP（记忆化搜索实现）

    本文出自:http://blog.csdn.net/dr5459 题目地址: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&a ...

  5. 紫薇~还记得大明湖畔的HTML5智力拼图吗？

    曲线谜团是非常有趣的HTML5智力游戏,据说超过多少分会有惊喜,游戏简单易操作,偶尔抛弃那种杀死脑细胞的大型游戏,玩玩这种简单经典的益智小游戏,放松放松,也是不错的选择嘛-将游戏 通过 统一开发环境( ...

  6. 哥德尔，图灵和康托尔 part 2 停机问题

    图灵著名的停机问题对于软件开发者而已是非常熟悉的.下面简单描述停机问题: 假设给你一个计算机程序的源代码,也给你所有程序要用的数据,文件,硬盘,DVD等等,所有它需要处理的东西.你能告诉我程序最终是否 ...

  7. 关于微信的jsapi_ticket的获取方法;

    对于一个从前端转到后端的开发人员来说,这个玩意儿开始的时候是有点郁闷:不过明白原理之后就简单了, 获取jsapi_ticket:必须先获取access_token; 微信开发文档说access_tok ...

  8. Android快速开发框架汇总

    知乎贴:Android 开发有什么好的架构么? 里面这篇不错:Architecting Android…The clean way? 知乎贴: 一.如果对App的性能.包size有要求,对代码有洁癖不 ...

  9. ToDoList-学习中看到的知识盲点

    1. java中的volatile关键字的作用 2. java类加载器 3. Android源码编译 4. MediaPlayer的用法 5. Html5和web app

  10. 浅谈Spring（二）

    一.AOP编程(面向切面编程) AOP的本质是代理. 1.静态代理设计模式 概念:通过代理类为原始类增加额外功能. 代理类 = 原始类 + 额外功能 +实现原始类的相同接口. 优点:避免原始类因为额外 ...