我如何設計一個列表項目來包含圖像，而它們之間沒有任何間隙？

我想要的風格集包含一個無序列表內的圖像，使：我如何設計一個列表項目來包含圖像，而它們之間沒有任何間隙？

的<ul>佔據了包含元素的全寬
每個<li>佔據<ul>的寬度的25％
包含在<li>規模成比例作爲畫面大小調整
8個總圖像4個的圖像的兩個堆疊的行排列的圖像中的每個
有AR E無間隙，垂直或水平，所述圖像

之間我可以完成上面列表中的前四個目標，但似乎無法失去圖像的第一和第二行之間的間隙。

這裏的標記：

<div class="container"> 
    <ul> 
     <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li> 
     <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li> 
     <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li> 
     <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li> 
     <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li> 
     <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li> 
     <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li> 
     <li><img src="http://davidangerer.com/i/sample.jpg" alt="Image Description" /></li> 
    </ul> 
</div>

而且（復位後）CSS：

.container { 
    width: 90% 
    max-width: 960px; 
    margin: 6em auto; 
} 
.container ul { 
    float: left; 
    display: block; 
    width: 25%; 
    height: auto; 
} 
.container img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* fixes a bug in ie8 */ 
}

預先感謝任何幫助，您可以提供。

乾杯，大衛

來源

2013-07-11 David Angerer

您必須設置上的圖像和li小號display:block;，以避免它們之間的醜陋內嵌保證金。看看這個working jsFiddle

.container img { 
    display:block; 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* fixes a bug in ie8 */ 
} 

.container ul li{ display:block; }

來源

2013-07-11 22:37:48

謝謝，Yotam。看起來像在''的CSS中加入'vertical-align：top;'也會縮小差距。 –

是的，有幾種方法可以做到這一點..我個人認爲，在處理像這樣的圖像時，最好添加'display：block'。樂意效勞：） –

圖像是內聯盒和看臺上的基線（defaut值：vertical-align:baseline;）。這解釋了下面的差距。您可以修復它想：

.container img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* fixes a bug in ie8 */ 
    vertical-align:top; 
}

或

.container img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* fixes a bug in ie8 */ 
    vertical-align:bottom; 
}

或讓你的直列boxe成塊boxe

.container img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* fixes a bug in ie8 */ 
    display:block;; 
}

來源

2013-07-11 22:41:34

我如何設計一個列表項目來包含圖像，而它們之間沒有任何間隙？

回答

相關問題