3行ul可變屏幕寬度

來自我無法訪問的PHP文件，我收到一串「liElHtml」的<li>元素。在這些載有圖像，因此基本上我通過AJAX收到此：3行ul可變屏幕寬度

<li class="liElHtml"><img src="some_img.png" /></li>

反正是有3行，而不具有靜態寬度堆疊這些整齊/均勻？我已經知道如何通過將3 <li>的合併寬度設置爲<ul>來實現此目的。我用google搜索了一下，看起來靜態寬度是我看到的唯一方式。

不幸的是，這必須是3行100％的寬度來填滿屏幕，因爲它是用於手機的。現在只是爲了得到它的工作我設置一個靜態的寬度，所以我必須對HTML：

<ul id="mainScreenUL"> 
</ul>

的CSS：

#mainScreenUL{ 
    list-style:none; 
    width:150px; 
} 

#liElHtml{ 
    display:inline-block; 
    width:50px; 
    height:50px; 
}

而jQuery的/ JavaScript的

$('#mainScreenUL').html(pic_data[1]);

pic_data[1]只是一個長串<li class="liElHtml"><img src="some_img.png" /></li>

這給了我一個預期的效果，無論如何，我可以將寬度設置爲width:100% on #mainScreenUL並獲得<li>的堆棧整齊地只有3行？感謝您花時間閱讀本文，我們非常感謝您的幫助。

如果所有li具有相同的高度，你可以很容易地把它們飄浮並以這種方式分配33.33％的寬度

li { 
    float: left; 
    width: 33.33%; 
}

然後只記得一個浮動清算申請ul元素

2012-10-02 09:14:12 fcalderan

謝謝，我現在要試試這個。 – user1053263

我不能相信這是多麼容易。沒想到解決方案很簡單。非常感謝。這工作非常好。我可以不接受另外5分鐘的答案。 – user1053263

很樂意提供幫助。 – fcalderan

li { 
    float: left; 
    width: 33.33%; 
}

如果你想100％並且可以編輯HTML，那麼將第一個和最後一個列表項目設置爲33%，將中間項目設置爲34%。

li { 
    float: left; 
} 

.first, ,last { 
    width: 33%; 
} 

.middle { 
    width: 34%; 
}

這改變了，如果你想邊框/利潤率等，但會在使用33.33%葉取出個小小微小的差距。

如果您不能觸摸HTML，那麼您始終可以使用:first-child和:last-child選擇器，但您可能會爲其支持某些瀏覽器而苦惱。

2012-10-02 09:16:23 SpaceBeers

我必須將.first和.middle添加到li元素嗎？還是這些選擇器？ – user1053263

這些是類，所以你可以將它們添加到li元素中。你「可以」使用：第一個孩子，最後一個孩子，但如果你可以輕鬆編輯HTML，我會添加類。 – SpaceBeers

該死的，我收到這些李的PHP，我沒有通過ajax訪問。他們總是進來不同，所以我甚至不能用jquery添加這些類。感謝您花時間回覆。 – user1053263

回答