图像之间有间隙

问题描述

| 我有一些需要对齐的图像，没有任何间隙。我可以在jsfiddle中找到它们，请参阅http://jsfiddle.net/QZLSf/2/ 但是在实际的SharePoint网站上，图像之间存在间隙，有点像http://jsfiddle.net/QZLSf/1/ 我已经检查了FireBug和图像以及链接，具有它们应具有的所有属性，但是我无法摆脱这个空白。我可能会缺少什么？编辑：我知道第二个链接已将footerlinks定义为一个类，但我只是用它来说明我遇到的问题。那不是我的实际代码。编辑：编辑：好的，似乎有人对我在这里问的是一个误解。我知道如何获得所需的结果，只是在SharePoint网站上不起作用。我只需要关于可能出什么问题的建议，因为应该正常工作的所有东西都无法正常工作。

解决方法

就是那样子。您必须将左边距设置为-4px

.footerlinks img {
    margin-left: -4px;
}
.footerlinks img:first-child {
    margin-left: 0px;
}

演示：http：//jsfiddle.net/QZLSf/11/ 编辑：此解决方案是更正确的。我将保证金固定在第一个孩子上。 ,删除图像之间的空白/换行符。演示：http：//jsfiddle.net/QZLSf/12/ ,刚刚将此解决方案发布到其他地方，并认为这是同一件事..您的Sharepoint实现是否将<img>元素放在HTML中的单独行上？在您的提琴中，您将它们全部放在一行上..如果这是区别，那么恐怕这是内联元素（单词之间的空格）的自然行为。.这里有涉及HTML注释的hacks或删除间距或拆分img标签，但是如果您没有（或不想）HTML解决方法-那么类似的方法应该可以工作 CSS：

div {word-spacing: -4px; background: #eee; border: 1px solid #000; width: 600px;}
div p {word-spacing: 0;}

的HTML

<div>
<img src=\"http://dummyimage.com/150x50/dad/fff\" alt=\"my mini thing\" />
<img src=\"http://dummyimage.com/150x50/000/fff\" alt=\"my mini thing\" />
<img src=\"http://dummyimage.com/150x50/dad/fff\" alt=\"my mini thing\" />
<img src=\"http://dummyimage.com/150x50/000/fff\" alt=\"my mini thing\" />
<p>the div containing these images and text has it\'s word-spacing set to -4px which removes the default whitespace</p>
<p>but then you want some text with normal spacing reset the word-spacing to 0 on the &lt;p&gt; elements,which is the default</p>
</div>

,这是您的代码：

#footerlinks a,#footerlinks img{

但是footerlinks是class而不是id，因此使用此命令：

.footerlinks a,.footerlinks img{

,剥猫的方法... http://jsfiddle.net/eCSYt/45/ bazmegakapa的更新：对不起，假设代码很容易遵循，我只是将其作为替代方法来展示。差距是由HTML格式中的空白引起的-这很重要。通过将font-size设置为1px（如果支持xbrowser，则实际上为0更好），空白太小而无法呈现。在实际页面中，您可能还需要将行高设置为零。我使用text-align将文本居中只是为了显示另一种方法...它的优点是您不需要知道图像的总宽度

图像间隙

图像之间有间隙

问题描述

解决方法

相关问答