CSS禁止ul内的li换行

html-css026

CSS禁止ul内的li换行,第1张

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

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

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

加上如下的CSS设置,就是设定好宽度width,然后设置合适的word-wrap和word-break属性:

ul li{

    width: 100px

    word-wrap: break-word

    word-break: break-all

    white-space: normal

}

ul里面的li折行其实跟其他块状(block)元素的折行都是一样的。以下是相关的CSS属性:

word-warp 属性设置如何处理单词的折行,可以取的值有

word-wrap: normal | break-word

word-break 属性设置如何处理单词折断,仅支持IE,可以取的值有:

word-break: normal | break-all | hyphenate

white-space 属性设置如何处理元素内的空白。可以取的值有:

white-space: normal | nowarp | pre | pre-line | pre-warp | inherit

经测试对中文也有效。

外层div设个可见区域宽度,同时益处隐藏。

li左浮动,接下来是重点啦!!!!

设置ul宽度,设一个大一些的值,例如5000px,或者用脚本来动态计算赋值也行。这样就能实现你想要的效果。哎,当初刚学时这都不叫事,好久没用了,现在也遇到这个问题了,墨迹了半天才发现原因......