圖像有一個很大的餘量，沒有設置

我試圖創建一個列表與圖像，並排，每個人都有其鏈接和影響懸停。一切工作正常，除了圖像創建一個142px的左邊距離的地方。圖像有一個很大的餘量，沒有設置

邊距爲0（聲明多次爲margin: 0），並且使用Firebug（Firefox調試工具）它說圖像有一個142px的左邊距。

的代碼如下（縮短，當然）：

<div id=""> 
    <ul> 
     <li><a href=""><img src="" /><img class="bloom" src="" /></a></li> 
     <li><a href=""><img src="" /><img class="bloom" src="" /></a></li> 
     <li><a href=""><img src="" /><img class="bloom" src="" /></a></li> 
    </ul> 
</div>

而CSS：

# { 
    height: 185px; 
    padding: 16px 0px; 
    position: relative; 
    width: 100%; 
} 

# ul { 
    list-style: none; 
    width: 951px; 
} 

# li { 
    background: black; /*just to verify if the margin was on the LI or IMG*/ 
    float: left; 
    height: 185px; 
    margin: 0 16px; 
    width: 285px; 
} 

# img { 
    position: absolute; 
} 

# img.bloom { 
    display: none; 
    z-index: 1; 
}

的「起霜白化」圖像是懸停效果的一部分。正如你所看到的，NOWHERE是「保留餘量」的集合，無論是在這裏還是在任何地方。您可以在鏈接中看到它：http://ranierialthoff.com.br/elite/頁腳之前的圖像。

來源

2013-03-01 ranisalt

我在您的#unidades li元素中看到text-align:center。它會使img居中。

您可以將其更改爲left以解決您的問題。

如果你想集中它們。只要刪除position:absolute#unidades img並保持text-align:center仍然。

來源

2013-03-01 03:30:29 pktangyue

是的，這是問題所在。我怎樣才能「集中」他們呢？ – ranisalt 2013-03-01 03:32:15

@ranisalt我更新了我的文章。 – pktangyue 2013-03-01 03:35:42

這兩個圖像必須位於完全相同的位置（一個位於另一個位置），所以我無法將其刪除，或者它們並排排列。無所謂，我通過設置圖像的固定大小來解決問題，所以我知道確切的寬度:) – ranisalt 2013-03-01 04:19:32

這不是左邊距，它是圖像的位置。你的問題是，你絕對定位的圖像，而不告訴瀏覽器哪裏把它們。您需要添加top: 0; left: 0;或類似於您的#unidades img款式。

來源

2013-03-01 03:25:45

那麼，我發現問題是'文本對齊：中心;'。圖像的左側位於李的中心，而不是集中。但不錯的答案：D – ranisalt 2013-03-01 03:31:14

圖像有一個很大的餘量，沒有設置

回答

相關問題