Question

我有一些图像，我需要排队，没有任何差距。我可以在jsFiddle中得到它们，请参阅http://jsfiddle.net/QZLSf/2/

但在实际的SharePoint网站上，图片之间存在差距，有点像http://jsfiddle.net/QZLSf/1/

我已经使用FireBug进行了检查，图像和链接具有应有的所有属性，但我无法摆脱这种差距。

我能错过什么？

编辑：我知道第二个链接的脚链被定义为一个类，但我只是用它来说明我遇到的问题。这不是我的实际代码。

编辑：编辑：好的家伙似乎对我在这里问的问题存在误解。我知道 HOW 来获取所需的结果，只是它不能在SharePoint站点上运行。我只需要提出可能有问题的建议，因为应该工作的一切都不起作用。

Answer 1

删除图像之间的空格/换行符。

演示：http://jsfiddle.net/QZLSf/12/

Answer 2

刚刚在其他地方发布了这个解决方案并且认为它是一样的..你的Sharepoint实现是否将<img>元素放在HTML的不同行中？

在你的小提琴中，你将它们全部放在一条线上......如果那是不同的话，那么我担心这是内联元素（单词之间的空格）的自然行为..那里有一些涉及HTML注释或删除间距的黑客或拆分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>

Answer 3

这是你的代码：

#footerlinks a, #footerlinks img{

但是footerlinks 类不是id，所以请使用：

.footerlinks a, .footerlinks img{

Answer 4

皮肤猫的方法......

http://jsfiddle.net/eCSYt/45/

更新bazmegakapa：

抱歉，假设代码很容易理解，我只是将其作为替代方法来实现它。

间隙是由HTML格式中的空白区域引起的 - 这很重要。通过将font-size设置为1px（如果支持xbrowser，实际上0会更好），空白区域太小而无法呈现。在实际页面中，您可能还需要将行高调零。

我使用text-align对文本进行居中只是为了显示另一种方法......它的优点是你不需要知道图像的总宽度

Answer 5

就是这样。您必须将margin-left设置为-4px

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

演示：http://jsfiddle.net/QZLSf/11/

编辑：这个解决方案更正确。我修复了第一个孩子的保证金。

图像之间存在差距

5 个答案:

删除图像之间的空格/换行符。

演示：http://jsfiddle.net/QZLSf/12/