css防止ul下的li换行代码

飘逸的风12年前 (2015-01-13)前端7581

完成效果图:

css防止ul下的li换行代码 - 小板栗 - ~自由的飞翔~

 出现问题的效果图:

css防止ul下的li换行代码 - 小板栗 - ~自由的飞翔~
由于我做的页面品牌那里要展示的品牌名称肯定是有长有短,所以无法给li定义width,所以我只给li加了个float,在火狐和ie8下li更够自动换行,但是ie7和ie6不行,最后在网上查到个解决办法。就是给li加white-space: nowrap;问题就解决了!

html页面:

<div class="sx_list">
    <ul>
       <li class="sx_hover"><a href="#">全部</a></li>
       <li><a href="#">薇姿</a></li>
       <li><a href="#">波斯顿</a></li>
       <li><a href="#">忆丽贝萝</a></li>
       <li><a href="#">玉兰油</a></li>
       <li><a href="#">雅呵雅</a></li>
       <li><a href="#">珂苪姿</a></li>
        <li><a href="#">欧泊莱</a></li>
        ...
      </ul>
    </div>

css样式:

.sx_list li { float:left; display:block; margin:2px 0 0 0; padding-right:10px;  line-height:16pt; white-space: nowrap; }

语法:
white-space : normal | pre | nowrap
取值:
normal: 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行。
pre: 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。
nowrap: 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。

说明:
设置或检索对象内空格字符的处理方式。
空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体    来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。

相关文章

jQuery 滚动鼠标中键图片自动改变大小(统一控制)

今天维护一个项目,需要对内容里的图片通过图片中间控制大小。由于是以前完成的,客户之前也没有提出要求,所以对已经添加后的数据没办法在一个个地在图片上加函数。网上查找了一下控制中键的资料,终于找到解决办法...

jquery简单代码实现复选框多选、单选、全不选功能,很实用

<html> <head>  <script type="text/javascript" src="https://code.jquery.com/jqu...

jQuery插件 图片放大镜-Cloud Zoom

jQuery插件 图片放大镜-Cloud Zoom

图片放大镜效果是一种不错的效果,多应用于电子商务、图片展示等网站,给用户带来更好的体验。实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 jQuery 的一个插件。和其他产品相...

jQuery scrollUp - jQuery滚动到顶部插件

jQuery scrollUp - jQuery滚动到顶部插件

当网页内容过长,你浏览到底部需要回到顶部时,是不是希望“一键直达”呢?scrollUp 就是这样一款插件,它能够让用户滚动条滚动到一定的位置时(可设置),右下角出现“滚动到顶部”的按钮,点击后,页面就...

js 数组操作集合

注意:以下是按操作来分类的,有的方法有多个用途,就有重复 1、数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Arra...

CSS透明属性详解

CSS透明属性详解

透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opac...

评论列表

厦门微信营销
12年前 (2015-01-23)

这个CSS挺好用的!列表 内容啊什么的经常用到!

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。