如何实现li居中并且内部不换行效果？(li长度不固定)_html/css_WEB-ITnose

我现在是用的li标签和设定li的display:inline;来实现的，可现在如果li的长度过长的话，会在内部到第二行时换行，请问如何实现？注：1.我这是后台读取数据动态生成的，即li的个数不固定，并且每个li的长度不固定
2.要求每行整体居中，并且li不内部换行
3.不知道是网络不给力还是csdn程序问题，图片就是上传不上去

回复讨论(解决方案)

没太清楚。。贴代码出来看看呢?

1、li内部不换行的话存在一个问题，如果你的数据量大于你当前的li的最大的宽度的时候是折行还是不显示呢？
2、你说的全部居中的话就是不存在折行的问题，可以对数据预先处理，截取相应的长度。

设置nowrap则不会换行。

li {    display: inline;    white-space: nowrap;}

不换行的css 加在ul里面 然后你试试

#ul {white-space:nowrap; width:920px; overflow:hidden;text-overflow:ellipsis;}#li {*float:left; width:90px; margin:0 5px; *clear:right; text-align:center; display:inline-block}

大家注意了，我的ul是随着div容器宽度自动适应的，下面贴出我的代码，外部div的宽度是动态的，随着页面变化而变化，要的效果就是标签居中，li内部不换行，但是li如果这一行宽度不够自己要能跑到下一行的

             
局数据中心建设
数据采集安装
生产指挥
采油工程决策
鲁明采油工程综合业务平台
局采油工程综合业务推广专题
鲁明公司GIS系统
局动态监测
电子地宫

都说了加上nowrap，你试过没有？
在线 演示代码

大家注意了，我的ul是随着div容器宽度自动适应的，下面贴出我的代码，外部div的宽度是动态的，随着页面变化而变化，要的效果就是标签居中，li内部不换行，但是li如果这一行宽度不够自己要能跑到下一行的

text-algin:center , display:inline ; 如果在IE6,7 下LI 才不会自动换行 . 需要另加处理 , 而你如果宽度超过一行. 第二行多几个字， 你第二行几个字也会居中。

display:inline-block

给li

都说了加上nowrap，你试过没有？
在线 演示代码

大家注意了，我的ul是随着div容器宽度自动适应的，下面贴出我的代码，外部div的宽度是动态的，随着页面变化而变化，要的效果就是标签居中，li内部不换行，但是li如果这一行宽度不够自己要能跑到下一行的

你干过几年程序了？？？？看我的需求了吗？？？div宽度是动态的，动态的！！！你把浏览器窗口缩小再缩小看看

display:inline-block

给li

胡扯 自己试试！

display:inline-block

给li

胡扯 自己试试！

必须block
因为inline 表示行内元素 行内元素是允许跨行的（就类似自然文本 超出一行了打印到下一行）
block 是不会跨行的 （当然内容会撑开高度）
所以你的问题是 block中的文字只显示一行 不换行

.bNav ul li {
display: inline;
display:inline-block;
display:inline-table;
padding: 0;
margin-right: 15px;
margin-left: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
三个display貌似都可以

display:inline-block

给li

胡扯 自己试试！

必须block
因为inline 表示行内元素 行内元素是允许跨行的（就类似自然文本 超出一行了打印到下一行）
block 是不会跨行的 （当然内容会撑开高度）
所以你的问题是 block中的文字只显示一行 不换行

我要的是能实现效果的解决方案 你扯多么多干啥 或者你给个解决办法

看12楼～～～～

首先，我不是程序员，我也干过程序。
其次，除了在.bNav ul li的样式里面加了一行white-space: nowrap;，其他的代码都是你上面贴出来的。所以我说你没试过，估计没有冤枉你。
下面是上面的演示代码的动态截图，你自己看清楚浏览器窗口缩小再缩小：
1) div的宽度是否动态也跟着变了
2) 每个li便签是否是居中的
3) li内部是否没有换行
4) li如果这一行宽度不够自己是不是跑到下一行
你还有其他的需求吗？不知道你干过几年程序了？你是第二个我碰到的第二个需求解决方案态度还这么拽的。

你干过几年程序了？？？？看我的需求了吗？？？div宽度是动态的，动态的！！！你把浏览器窗口缩小再缩小看看

首先，我不是程序员，我也干过程序。
其次，除了在.bNav ul li的样式里面加了一行white-space: nowrap;，其他的代码都是你上面贴出来的。所以我说你没试过，估计没有冤枉你。
下面是上面的演示代码的动态截图，你自己看清楚浏览器窗口缩小再缩小：
1) div的宽度是否动态也跟着变了
2) 每个li便签是否是居中的
3) li内部是否没有换行
4) li如果这一行宽度不够自己是不是跑到下一行
你还有其他的需求吗？不知道你干过几年程序了？你是第二个我碰到的第二个需求解决方案态度还这么拽的。

你干过几年程序了？？？？看我的需求了吗？？？div宽度是动态的，动态的！！！你把浏览器窗口缩小再缩小看看

拽不拽你试试IE兼容模式行不行 还有12楼, 包括ie6,ie7,ie8,ie9,ie10,ie都搞不定 你搞啥？

都说了加上nowrap，你试过没有？
在线 演示代码

大家注意了，我的ul是随着div容器宽度自动适应的，下面贴出我的代码，外部div的宽度是动态的，随着页面变化而变化，要的效果就是标签居中，li内部不换行，但是li如果这一行宽度不够自己要能跑到下一行的

看来你用的浏览器比较高级啊，不好意思，我们客户都还达不到你那个配置，大部分还在用ie，并且是兼容模式

我不搞啥，我玩这个纯属业务爱好
不好意思，不是我的浏览器高级，Google Chrome很多人在用，不要说你都没听过。
参考: IE6 CSS display:table fix?
下面的动态截图是在Win 8.1下IE 11的模拟低版本浏览器，不一定在你实际的ie6,ie7,ie8,ie9,ie10有效，但是如果你还有兴趣的话，可以点击 演示结果在你的ie6,ie7,ie8,ie9,ie10中兼容一下。

拽不拽你试试IE兼容模式行不行 还有12楼, 包括ie6,ie7,ie8,ie9,ie10,ie都搞不定 你搞啥？

我不搞啥，我玩这个纯属业务爱好
不好意思，不是我的浏览器高级，Google Chrome很多人在用，不要说你都没听过。
参考: IE6 CSS display:table fix?
下面的动态截图是在Win 8.1下IE 11的模拟低版本浏览器，不一定在你实际的ie6,ie7,ie8,ie9,ie10有效，但是如果你还有兴趣的话，可以点击 演示结果在你的ie6,ie7,ie8,ie9,ie10中兼容一下。

拽不拽你试试IE兼容模式行不行 还有12楼, 包括ie6,ie7,ie8,ie9,ie10,ie都搞不定 你搞啥？

我不搞啥，我玩这个纯属业务爱好
不好意思，不是我的浏览器高级，Google Chrome很多人在用，不要说你都没听过。
参考: IE6 CSS display:table fix?
下面的动态截图是在Win 8.1下IE 11的模拟低版本浏览器，不一定在你实际的ie6,ie7,ie8,ie9,ie10有效，但是如果你还有兴趣的话，可以点击 演示结果在你的ie6,ie7,ie8,ie9,ie10中兼容一下。

拽不拽你试试IE兼容模式行不行 还有12楼, 包括ie6,ie7,ie8,ie9,ie10,ie都搞不定 你搞啥？

仔细测试对比发现你的可以，主要是你css多了这么一句zoom:1,这个估计是ie的bug吧。总之问题解决就ok了！说说你刚开始怎么想到用zoom了啊？我真没用过。。。分全部给你！

我刚开始没有想到用zoom，我也想不到用zoom，因为我上面说过我不是程序员，这个解决方案是我在你提出要兼容IE6的时候在网上搜索到的，参考链接上面已经给了，那个回复者也给出了每一条css的作用。
帮助别人解决问题本身是一件快乐的事情，但是碰到你想办法帮助解决问题，提问者却说你都不懂不要说话的情况，心情确实不爽。害得我回复的时候字都打错了好几次，本来是说"我不是程序员，我也没干过程序"，结果打成了"我不是程序员，我也干过程序"，本来是说"我不搞啥，我玩这个纯属业余爱好"，结果打成了"我不搞啥，我玩这个纯属业务爱好"。
最后说一下，其实是翻译一下，zoom的作用是触发display为inline的li节点的IE特有的hasLayout属性。
问题解决就OK吧，且行且珍惜。

仔细测试对比发现你的可以，主要是你css多了这么一句zoom:1,这个估计是ie的bug吧。总之问题解决就ok了！说说你刚开始怎么想到用zoom了啊？我真没用过。。。分全部给你！