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

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

回复讨论(解决方案)

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

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

设置nowrap则不会换行。

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

Nach dem Login kopieren

不换行的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}

Nach dem Login kopieren

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type='text/css'>.bNav{    background-color: #3CA9FE;    text-align: center;    line-height: 30px;    font-size: 14px;    margin-top: 5px;width:100%;}    .bNav ul    {        padding: 0;        width:100%;margin: 0 auto;    }        .bNav ul li        {            display:inline;            padding: 0;            margin-right: 15px;margin-left: 10px;                    }</style></head><body> <!--系统链接-->            <div id="bNav" class="bNav"><ul><li>局数据中心建设</li><li >数据采集安装</li><li ></li><li >生产指挥</li><li >采油工程决策</li><li >鲁明采油工程综合业务平台</li><li >局采油工程综合业务推广专题</li><li>鲁明公司GIS系统</li><li>局动态监测</li><li>电子地宫</li></ul></div></body></html>

Nach dem Login kopieren

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

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

display:inline-block

给li

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

你干过几年程序了？？？？看我的需求了吗？？？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宽度是动态的，动态的！！！你把浏览器窗口缩小再缩小看看

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

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

看来你用的浏览器比较高级啊，不好意思，我们客户都还达不到你那个配置，大部分还在用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吧，且行且珍惜。

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

回复讨论(解决方案)