图像有一个很大的余量，没有设置

我试图创建一个列表与图像，并排，每个人都有其链接和影响悬停。一切工作正常，除了图像创建一个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

图像有一个很大的余量，没有设置

回答

相关问题