如何解決ulli內(nèi)容寬度的問題

本篇文章為大家展示了如何解決ulli內(nèi)容寬度的問題，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡營銷推廣、網(wǎng)站重做改版、永新網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5技術、商城網(wǎng)站定制開發(fā)、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為永新等各大城市提供網(wǎng)站開發(fā)制作服務。

先來解決問題：

li{
max-width: 100px;/*具體數(shù)值自行修改，下一行相同*/
width:expression(document.body.clientWidth>100?"100px":"auto");
overflow: hidden;
}

把上面的100改成你自己的最大寬度即可。

然后再來討論UL LI內(nèi)容寬度問題：

關于ul li文字長度不固定，一行顯示多列。當指定寬度時，文字長度超過指定的li寬度時解決方案：
如下代碼

代碼如下:

<h5>發(fā)送對象(共10個會員)</h5>
<div id="send_email">
 <ul>
 <li>tester123456(<a href="mailto:tester12346@qq.com)</li">tester12346@qq.com)</li</a>>
 <li>tester12345(<a href="mailto:tester12345@qq.com)</li">tester12345@qq.com)</li</a>>
 <li>test12345(<a href="mailto:test12345@qq.com)</li">test12345@qq.com)</li</a>>
 <li>willme(<a href="mailto:sdfsdf@sdf.com)</li">sdfsdf@sdf.com)</li</a>>
 <li>willbin(<a href="mailto:sdfsd@22f.com)</li">sdfsd@22f.com)</li</a>>
 <li>zhangsan(<a href="mailto:zhangsan@qq.com)</li">zhangsan@qq.com)</li</a>>
 <li>淘寶會員_u_865b68p1g7(<a href="mailto:u_265i54w3n7@localhost.com)</li">u_265i54w3n7@localhost.com)</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;}

這段代碼是將會員信息都顯示出來，一行顯示三個，但是現(xiàn)在問題出現(xiàn)了，這一行 <li>淘寶會員_u_865b68p1g7(u_265i54w3n7@localhost.com)</li> 因為寬度固定，但是li里面的內(nèi)容超過了200px導致且內(nèi)容中有下劃線且下劃線后是數(shù)字或者英文導致下劃線后面的內(nèi)容會自動換一行顯示，但是由于li的高度是固定的導致掉下去的一行內(nèi)容與下面
 
這個可以控制文字顯示的寬度，并且可以整齊的排列，但是當li里面的文字過多，超過200px時，里面的內(nèi)容會掉到下面一行來，導致與下面一行的內(nèi)容重疊，如果在.menber li里面加入overflow:hidden;的話內(nèi)容不會掉來，但是內(nèi)容會顯示不全，這時應該怎么辦呢，最好的解決辦法就是不指定寬度，將width設置為auto;并且 加上white-space:nowrap;這個代碼可以讓內(nèi)容不自動換行（遇到_等字符串時），這個問題是解決了，但是由于寬度不固定，所以內(nèi)容顯示不會那么整齊的，所有事情都很難十全十美，要顧及一些就要失去一些，這是沒辦法，如果各位大蝦有更好的解決辦法也可以分享一下。

上述內(nèi)容就是如何解決ulli內(nèi)容寬度的問題，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：如何解決ulli內(nèi)容寬度的問題
瀏覽地址：http://muchs.cn/article4/pisdoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、企業(yè)建站、網(wǎng)站收錄、網(wǎng)站改版、品牌網(wǎng)站建設、電子商務

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)