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

代码：

<!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. ReentrantLock(重入锁)以及公平性

    ReentrantLock(重入锁)以及公平性 标签(空格分隔): java NIO 如果在绝对时间上,先对锁进行获取的请求一定被先满足,那么这个锁是公平的,反之,是不公平的,也就是说等待时间最长的线 ...

  2. 退货行RMA编号改为必输选项

    应用 Oracle Inventory 层 Level Function 函数名 Funcgtion Name RCV_RCVTXERE 表单名 Form Name RCVTXERE 说明 Descr ...

  3. [推荐] 查看网站使用的JS框架

    查看各大网站使用的JS框架: 打开:http://oskarkrawczyk.github.com/wtframework/ 在这个中间的图片页面上右击,Add BookMarks.(添加到书签中) ...

  4. substr,substring,slice 的区别

    javascript中的三个函数substr,substring,slice都可以用来提取字符串的某一部分(函数名称都是小写,不要写成subStr,subString又或者Substring,记住js ...

  5. 截取字符串一之substr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Loading Image

    Android doesn’t handle animated gifs, but here’s one way to display an animated loading image that i ...

  7. 响应式(css_media)

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  8. 未能找到类型名称"MembershipProvider"

    将用户管理程序部署到SharePoint 2013平台上,系统编译报错:未能找到类型名称"MembershipProvider",此类型已转发到程序集System.web.Appl ...

  9. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  10. Oracle死锁。

    oracle数据库死锁一般情况下在oracle数据库中不会.但是在程序中可以开启事物没有提交,但是程序报错我们就关了程序在重新调试.但是我们程序总是在执行 comm.ExecuteNonQuery() ...