Heim > Artikel > Web-Frontend > 如何实现li居中并且内部不换行效果？(li长度不固定)_html/css_WEB-ITnose
如何实现li居中并且内部不换行效果？(li长度不固定)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:372243Durchsuche
我现在是用的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如果这一行宽度不够自己要能跑到下一行的
<!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> 都说了加上nowrap，你试过没有？
在线 演示代码
大家注意了，我的ul是随着div容器宽度自动适应的，下面贴出我的代码，外部div的宽度是动态的，随着页面变化而变化，要的效果就是标签居中，li内部不换行，但是li如果这一行宽度不够自己要能跑到下一行的
text-algin:center , display:inline ; 如果在IE6,7 下LI 才不会自动换行 . 需要另加处理 , 而你如果宽度超过一行. 第二行多几个字， 你第二行几个字也会居中。
display:inline-block
给li
都说了加上nowrap，你试过没有？
在线 演示代码
大家注意了，我的ul是随着div容器宽度自动适应的，下面贴出我的代码，外部div的宽度是动态的，随着页面变化而变化，要的效果就是标签居中，li内部不换行，但是li如果这一行宽度不够自己要能跑到下一行的
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宽度是动态的，动态的！！！你把浏览器窗口缩小再缩小看看
都说了加上nowrap，你试过没有？
在线 演示代码
大家注意了，我的ul是随着div容器宽度自动适应的，下面贴出我的代码，外部div的宽度是动态的，随着页面变化而变化，要的效果就是标签居中，li内部不换行，但是li如果这一行宽度不够自己要能跑到下一行的
我不搞啥，我玩这个纯属业务爱好
不好意思，不是我的浏览器高级，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了啊？我真没用过。。。分全部给你！