2013-07-22 77 views
-1

我有我的問題,我的IMG當我分配<ul>有人可以告訴我什麼事情發生嗎?css李圖像排列跳位置

CSS

<style> 
.contain { 
    width: 740px; 
    height: auto; 
    margin-top: 10px; 
} 
.contain ul li img { 
    border: 1px solid #999; 
    width: 127px; 
    height: 180px; 
} 
.contain ul li { 
    float:left; 
    text-decoration: none; 
    list-style-type: none; 
    margin-top: 15px; 
    margin-right: 8px; 
    margin-bottom: 15px; 
    margin-left: 7px; 
    display: block; 
} 
</style> 

HTML

<div class="contain"> 
    <ul> 
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li> 
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li> 
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li> 
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li> 
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li> 
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li> 
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li> 
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li> 
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>  
     <li><img name="Name" src="img/a.jpg" width="127" height="180" alt=\"imgName"></li>    
    </ul> 

但IMG輸出象下面這樣:

enter image description here

,你可以看到第第二行成爲一張圖像,第三行img肯定有4張,那麼爲什麼圖像沒有按照每行5張圖像排成2行?

+0

對不起,打錯字了。 –

+0

實際上是。爲什麼img不僅僅以兩排排列5。 thx的注意 –

+0

似乎很好地爲我工作http://fiddle.jshell.net/55gFU/ – Pete

回答