如何解决图像之间有间隙
| 我有一些需要对齐的图像,没有任何间隙。我可以在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 <p> 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将文本居中只是为了显示另一种方法...它的优点是您不需要知道图像的总宽度
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。