美文网首页
CSS禁止ul内的li换行

CSS禁止ul内的li换行

作者: 加贝hh | 来源:发表于2016-11-24 16:17 被阅读0次

    最近在写项目时遇到一个问题,实现一个导航栏,可以左右拖动,溢出body的宽时隐藏掉,于是就这样:

    ul明明是没有给宽,但发现li会随着ul父级的宽度进行换行,于是呢,就去网上实验了几种方法。 其中有效的一种是这样:

    重点是这样的,给ul添加了white-space: nowrap;属性。

    此属性在W3C了解到,是规定段落中的文本不进行换行。

    然后将li的浮动属性删除,换成了display:inline-block;。

    但是呢,转换为内联块又会不兼容ie的低版本(公司要求,必须兼容!!)。

    于是呢,就使用了CSS的hack,在display:inline-block;后面添加*display:linlne; zoom: 1;

    到这里,大功告成,可以去愉快的拖动了!

    相关文章

      网友评论

          本文标题:CSS禁止ul内的li换行

          本文链接:https://www.haomeiwen.com/subject/hywbpttx.html