css防止ul下的li换行代码

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

完成效果图:

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 字符串操作函数集合

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

让Div浮动层浮在Flash上面下去,div在flash上,层在flash上

直接复制如下代码做swf显示代码 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://...

js控制在网页中禁用右键和禁止另存为的代码

禁止网页右击,选择,最简单的两句代码: <script type="text/javascript"> <!-- document.oncontextmenu=n...

jw player的快捷调用方法(附:jw player参数设定)

最近开发的项目需要调用一部分视频,找了很久,感觉有两个非常不错,一个是ckplayer(非常炫酷,网址:https://www.ckplayer.com/),感觉好奇的同学,可以访问他们的官网去看看;...

JS window.close()关闭新窗口,怎样才不会有提示?

最近做到的项目,把以前写过的关闭新窗口页面代码拿来直接用,结果在IE浏览器下,关闭时有一个关闭提示。这样对于一些有强迫症的人来说,是一个难以接受的梗。因此找了不少资料,总算有了解决方法,以下是分享。...

CSS透明属性详解

CSS透明属性详解

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

评论列表

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

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

发表评论

访客

看不清,换一张

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