ul li內容寬度的問題的解決方法

近年來網站如雨後春筍般大批的出現在網絡上,對於網站來說web後端開發也變得越來越重要。下面就讓我們來了解一下ul li內容寬度的問題的解決方法。

在IE6下只要我設置LI的寬度為auto，不論LI裡面的內容多長，LI的寬度始終是100%，即UL的寬度(這裡我已經寫死了UL的寬度)。設置max-width也沒用。高手們，在IE系列浏覽器中如何使LI的寬度真正的隨著內容增長而增長呢?像FF那樣。

先來解決問題：

li{

max-width: 100px;/*具體數值自行修改，下一行相同*/

width:expression(document.body.clientWidth>100?"100px":"auto");

overflow: hidden;

}

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

然後再來討論UL LI內容寬度問題：

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

如下代碼

復制代碼代碼如下:

發送對象(共10個會員)

tester123456([email protected])>

tester12345([email protected])>

test12345([email protected])>

willme([email protected])>

willbin([email protected])>

zhangsan([email protected])>

淘寶會員_u_865b68p1g7([email protected])>

test

樣式

復制代碼代碼如下:

.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;}

這段代碼是將會員信息都顯示出來，一行顯示三個，但是現在問題出現了，這一行

淘寶會員_u_865b68p1g7([email protected])

因為寬度固定，但是li裡面的內容超過了200px導致且內容中有下劃線且下劃線後是數字或者英文導致下劃線後面的內容會自動換一行顯示，但是由於li的高度是固定的導致掉下去的一行內容與下面

這個可以控制文字顯示的寬度，並且可以整齊的排列，但是當li裡面的文字過多，超過200px時，裡面的內容會掉到下面一行來，導致與下面一行的內容重疊，如果在.menber li裡面加入overflow:hidden;的話內容不會掉來，但是內容會顯示不全，這時應該怎麼辦呢，最好的解決辦法就是不指定寬度，將width設置為auto;並且 加上white-space:nowrap;這個代碼可以讓內容不自動換行(遇到_等字符串時)，這個問題是解決了，但是由於寬度不固定，所以內容顯示不會那麼整齊的，所有事情都很難十全十美，要顧及一些就要失去一些，這是沒辦法，如果各位大蝦有更好的解決辦法也可以分享一下。

以上就是精品為您准備的關於的ul li內容寬度的問題的解決方法信息，希望對您的生活工作有幫助，祝您生活愉快。