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

代码：

<!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. 让两个Div并排显示

    一.使用display的inline属性 <div style="width:300px; height:auto; float:left; display:inline"& ...

  2. android 自定义控件，自定义属性设置

    做listView的上拉下拉刷新,网上找了个历程.但是有些界面只有上拉刷新,有些界面是下拉刷新.觉得应该在xml里定义一个属性控制上下拉使能. 0.关于自定义控件: 自定义控件设计主要方式有:a) 继 ...

  3. idea破解码

    43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...

  4. CC++初学者编程教程(2) Microsoft Visual C++ 6.0开发环境搭建

    上一篇演示的是如何安装VS2010,本文演示的是如何安装Microsoft Visual C++ 6.0 简称VC6. 有同学经常VC6都是很古董的版本了,为啥他还存在,不得不说VC6是微软一个很经典 ...

  5. C函数数组元素初始化

    初始化时,可随意指定初始化的元素或者元素的范围. 附gnu c 手册. http://www.gnu.org/software/gnu-c-manual/gnu-c-manual.html 代码: t ...

  6. linux 开通ftp账号

    1.更新yum源 首先需要更新系统的yum源,便捷工具下载地址:http://help.aliyun.com/manual?spm=0.0.0.0.zJ3dBU&helpId=1692 2.安 ...

  7. Seinfeld（栈模拟）

    Seinfeld Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  8. 从零开始Unity3D游戏开发【3烘焙】

    烘焙:通过烘焙能把动态场景转化为静态场景.从而提高游戏的性能. [烘焙步骤] 1.Edit---Player---Rendering[forword] 2.Directional light(必须是这 ...

  9. 全球最快的JS模板引擎

    废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发的 tmpl 的 43 倍!与第二 ...

  10. SQL 2008升级SQL 2008 R2完全教程或者10.00.4000升级10.50.1600

    今天将由于需要就将我的SQL 2008升级到SQL 2008 R2. 说到为什么要升级是因为,从另一台机器上备份了一个数据库,到我的机器上还原的时候提示“System.Data.SqlClient.S ...