CSS禁止ul内的li换行
2016-11-24 本文已影响0人
加贝hh
最近在写项目时遇到一个问题,实现一个导航栏,可以左右拖动,溢出body的宽时隐藏掉,于是就这样:
ul明明是没有给宽,但发现li会随着ul父级的宽度进行换行,于是呢,就去网上实验了几种方法。 其中有效的一种是这样:
重点是这样的,给ul添加了white-space: nowrap;属性。
此属性在W3C了解到,是规定段落中的文本不进行换行。
然后将li的浮动属性删除,换成了display:inline-block;。
但是呢,转换为内联块又会不兼容ie的低版本(公司要求,必须兼容!!)。
于是呢,就使用了CSS的hack,在display:inline-block;后面添加*display:linlne; zoom: 1;
到这里,大功告成,可以去愉快的拖动了!