css防止ul下的li换行代码

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

完成效果图:

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 。

相关文章

屏蔽js错误信息

在IE下经常有那个恼人的“网页上有错误”的提示,自己看到很闹心。相信初级用户看到很害怕。不过这个问题也是可以解决的!看看renaski的解决方案。 <script> window....

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

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

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

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

jQuery自适应宽度导航插件Horizo​​ntalNav

jQuery自适应宽度导航插件Horizo​​ntalNav

Horizo​​ntalNav 是一个 jQuery 导航插件,能够自适应容器的宽度。如果你曾经在一个项目中创建过这种效果,你就会知道,这是很难处理的。但这个插件很容易,并且支持 IE6、IE7。...

js 字符串操作函数集合

concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。  indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。  c...

jQuery动态改变图片显示大小(完美兼容全部)

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持...

评论列表

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

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

发表评论

访客

看不清,换一张

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