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

代码：

<!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. QT进度条QProgressBar的练习

    progressbar.h #ifndef PROGRESSBAR_H #define PROGRESSBAR_H #include <QProgressBar> class QStrin ...

  2. 从麦肯锡到小黑裙－Project Gravitas |华丽志

    从麦肯锡到小黑裙-Project Gravitas |华丽志 从麦肯锡到小黑裙-Project Gravitas

  3. nodejs项目中的路由写法

    //两种路由写法,一种封装成函数,返回结果,此种方法可以传递参数, "use strict"; var _ = require("lodash"); var e ...

  4. I Hate It(线段树)

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  5. linux创建文件树,孩子兄弟树（或广义表）,创建文件树及其訪问

    假设在Linux下要訪问一个目录. 我们须要知道一下系统调用. 1.opendir(path); //注意path是绝对路径 2.ptr=readdir(dir);//dir 为opendir();正 ...

  6. Canvas标签初探

    学了一点基础知识,感觉好神奇,全部练习代码 <html> <head> <meta http-equiv=Content-Type content="text/ ...

  7. oracle 11g导入导出

    数据的导入 1 将D:\daochu.dmp 中的数据导入 TEST数据库中.   imp system/manager@TEST  file=d:\daochu.dmp    上面可能有点问题,因为 ...

  8. Javascript闭包概念剖析

    某种情况下,函数调用依然持有对其原始定义的作用域的引用,这个引用就叫做闭包. function foo(){ var a = 2; function bar(){ console.log(a); } ...

  9. 根据用户的ID查用户的名字

    awk -F: '{if($3==0){print $1}}'  /etc/passwd

  10. JS兼容性问题列表

    记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会随着开发遇到问题而更新,标记为黄色的为未解决和猜测答案 提出时间 问题描述 解决方案 2014/10/22 submit按钮阻止了默认事件不能 ...