css防止ul下的li换行代码

飘逸的风11年前 (2015-01-13)前端7194

完成效果图:

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 。

相关文章

escape()、encodeURI()、encodeURIComponent()区别详解

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod...

js判断undefined类型,undefined,null,NaN的区别

js判断undefined类型 今天使用showModalDialog打开页面,返回值时。当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined 所以自作聪明判断&nb...

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

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

JS设为首页加入收藏兼容特效

废话不多说,上代码: // 添加到收藏夹 function AddFavorite(sURL, sTitle) { try { if (typeof(sURL) == "undefi...

JS键盘控制翻页代码

<script language="javascript"> <!-- document.onkeydown=nextpage var prevpage="prev.html"...

jQuery插件 图片放大镜-Cloud Zoom

jQuery插件 图片放大镜-Cloud Zoom

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

评论列表

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

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

发表评论

访客

看不清,换一张

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