css防止ul下的li换行代码

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

完成效果图:

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键盘控制翻页代码

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

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

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

jQuery下拉框美化插件DropKick

jQuery下拉框美化插件DropKick

DropKick 是一个下拉框美化插件,使用非常简单,直接为下拉框 select 调用方法即可,瞬间让你摆脱繁琐。DropKick 有 3 种主题,你可以选择一种与你的页面更加搭配的,当然你也可以自己...

js 数组操作集合

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

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

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

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

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

评论列表

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

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

发表评论

访客

看不清,换一张

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