今天小编跟大家讲解下有关ul li内容宽度的问题的解决方案 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关ul li内容宽度的问题的解决方案 的相关资料，希望小伙伴们看了有所帮助。
先来解决问题：
li{max-width: 100px;width:expression(document.body.clientWidth>100?"100px":"auto");overflow: hidden;}
把上面的100改成你自己的最大宽度即可。
然后再来讨论UL LI内容宽度问题：
关于ul li文字长度不固定 一行显示多列。当指定宽度时 文字长度超过指定的li宽度时解决方案：如下代码
复制代码代码如下:<h4>发送对象(共10个会员)</h4><div id="send_email"> <ul> <li>tester123456(<a href="https://www.aidi.net.cn//css/mailto:[email protected])</li">[email protected])</li</a>> <li>tester12345(<a href="https://www.aidi.net.cn//css/mailto:[email protected])</li">[email protected])</li</a>> <li>test12345(<a href="https://www.aidi.net.cn//css/mailto:[email protected])</li">[email protected])</li</a>> <li>willme(<a href="https://www.aidi.net.cn//css/mailto:[email protected])</li">[email protected])</li</a>> <li>willbin(<a href="https://www.aidi.net.cn//css/mailto:[email protected])</li">[email protected])</li</a>> <li>zhangsan(<a href="https://www.aidi.net.cn//css/mailto:[email protected])</li">[email protected])</li</a>> <li>淘宝会员_u_865b68p1g7(<a href="https://www.aidi.net.cn//css/mailto:[email protected])</li">[email protected])</li</a>> <li>test</li> </ul></div>
样式
复制代码代码如下:.menber{width:754px; margin:0px auto;line-height:25px; max-height:200px;}.menber li{clear:none;width:200px;float:left;height:25px;line-height:40px; margin-right:30px;}
这段代码是将会员信息都显示出来 一行显示三个 但是现在问题出现了 这一行 <li>淘宝会员_u_865b68p1g7([email protected])</li> 因为宽度固定 但是li里面的内容超过了200px导致且内容中有下划线且下划线后是数字或者英文导致下划线后面的内容会自动换一行显示 但是由于li的高度是固定的导致掉下去的一行内容与下面这个可以控制文字显示的宽度 并且可以整齐的排列 但是当li里面的文字过多 超过200px时 里面的内容会掉到下面一行来 导致与下面一行的内容重叠 如果在.menber li里面加入overflow:hidden;的话内容不会掉来 但是内容会显示不全 这时应该怎么办呢 最好的解决办法就是不指定宽度 将width设置为auto;并且 加上white-space:nowrap;这个代码可以让内容不自动换行（遇到_等字符串时） 这个问题是解决了 但是由于宽度不固定 所以内容显示不会那么整齐的 所有事情都很难十全十美 要顾及一些就要失去一些 这是没办法 如果各位大虾有更好的解决办法也可以分享一下。
来源：爱蒂网
