2010-07-08 69 views
1

我想創建一個顯示一些圖像的固定佈局。例如,連續3張圖像和一列3張圖像的「表格」。 此外,我需要每個鋰conatins一些固定的寬度和高度和圖像居中和alignet頂部。如何用css創建多列列表?

所以我鑫卡特在這樣的事情:

<ul> 
<li><img /></li> 
<li><img /></li> 
<li><img /></li> 
</ul> 
<ul> 
<li><img /></li> 
<li><img /></li> 
<li><img /></li> 
</ul> 
<ul> 
<li><img /></li> 
<li><img /></li> 
<li><img /></li> 
</ul> 

但我不知道CSS,還是我已經創造了一些類似這樣的,但仍然無法正常工作......

ul {display: block; text-align: center; border:#666666 solid 1px; height: 150px; padding:0; margin:0;} 
li { list-style:none; float:left; width: 150px; height: 150px; margin-bottom: 32px;} 

修正版本:

ul{ height: 180px; text-align:center;padding:0;} 
li{list-style:none;padding:0;width: 25%;height: 180px;float: left; display:inline-block;} 

注意:僅適用於只有一個<ul>且有多個<li>,列設置爲更改<li>的寬度。 25%表示4列,33%= 3列等。公式:100 /(所需列)。

回答

2

列表標籤並上傳here,希望它能幫助你塞林。

CSS:

<style type="text/css"> 
    ul { list-style-type:none; margin:0px; padding:0px; overflow:hidden; } 
    li { float:left; width:150px; height:150px; margin:2px; padding:3px; background:#CCCCCC; text-align:center; } 
    li img { max-width:144px; } 
</style> 

HTML:

<ul> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
</ul> 
<ul> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
</ul> 
<ul> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
</ul> 
+0

非常感謝:-) – 2010-07-08 13:03:22

2

你幾乎就在那兒。我所做的所有工作都被刪除了float: left;,並在<li>標記上用display: inline-block;代替。這對我來說一切都很完美。如果您有垂直取向的任何問題,請嘗試設置在<img>標籤下面:vertical-align: top;

上有Mozilla的Webdev的博客以驚人的文章解決這個:我做了3×3盒Cross-Browser Inline-Block

+0

沒錯,但內聯塊不允許設置高度:P 但是好了,我已經解決了。固定在主帖子上。 – 2010-07-08 04:41:31

+0

http://www.quirksmode.org/css/display.html#inlineblock - 「一個內嵌塊放在內聯(即與相鄰內容位於同一行),但它表現爲一個塊。」表現得像一個塊意味着你可以設置一個特定的高度和寬度,我總是用水平導航菜單來完成。 – desertwebdesigns 2010-07-08 05:01:13