html - 如何删除inline-block元素之间的间距?

  显示原文与译文双语对照的内容

给定这里 HTML:


<p>
 <span> Foo </span>
 <span> Bar </span>
</p>

还有这个 CSS:


span { 
 display:inline-block;
 width:100px;
}

结果,在SPAN元素之间会有一个 4像素宽的空间。
演示:http://jsfiddle.net/dGHFV/

我明白为什么会这样做,而且我也知道,通过删除HTML源代码中的SPAN元素之间的white-space,我可以消除这种空间,比如:


<p>
 <span> Foo </span><span> Bar </span>
</p>

但是,我希望一个CSS解决方案不需要篡改HTML源代码。

我知道如何解决这个javascript——通过删除容器元素的文本节点( 段落), 像这样:


//jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示:http://jsfiddle.net/dGHFV/1/

但是这个问题能否只用CSS解决?

时间:

好的,虽然我有upvoted和 font-size: 0;not implemented CSS3 feature 答案,在尝试了之后,我发现它们都是一个真正的解决方案

实际上,没有强副作用就没有一个解决办法。

然后我决定删除空格 ( 这个答案就是关于这个论点) 之间 inline-block div从我 HTML ( JSP ) 来源,将:


<div class="inlineBlock">
 I'm an inline-block div
</div>
<div class="inlineBlock">
 I'm an inline-block div
</div>

到这里


<div class="inlineBlock">
 I'm an inline-block div
</div><div class="inlineBlock">
 I'm an inline-block div
</div>

那很难看,但是工作。

但是,等一下。。如果我在 Taglibs loops ( Struts2JSTL 等。) 中生成我的div?

例如:


<s:iterator begin="0" end="6" status="ctrDay">
 <br/>
 <s:iterator begin="0" end="23" status="ctrHour">
 <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
 <div class="inlineBlock>
 I'm an inline-block div in a matrix 
 (Do something here with the pushed object...)
 </div>
 </s:push>
 </s:iterator>
</s:iterator>

把所有的东西都嵌入其中绝对不是 thinkable,这意味着


<s:iterator begin="0" end="6" status="ctrDay">
 <br/>
 <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
 I'm an inline-block div in a matrix 
 (Do something here with the pushed object...)
 </div></s:push></s:iterator>
</s:iterator>

这不是可读,很难mantain和理解, 等等 。

我找到的解决方案:

使用html注释连接一个div的结束的开始下一个!


<s:iterator begin="0" end="6" status="ctrDay">
 <br/>
 <s:iterator begin="0" end="23" status="ctrHour"><!--
 --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
 --><div class="inlineBlock>
 I'm an inline-block div in a matrix 
 (Do something here with the pushed object...)
 </div><!--
 --></s:push><!--
--></s:iterator>
</s:iterator>

这样你就可以有一个可读的和正确缩进的代码。

而且,作为积极的副作用,HTML source 虽然受到空注释的侵扰,但会得到正确的缩进;

让我们先看看第一个例子,我认为:


 <div class="inlineBlock">
 I'm an inline-block div
 </div><!--
 --><div class="inlineBlock">
 I'm an inline-block div
 </div>

比这更好


 <div class="inlineBlock">
 I'm an inline-block div
 </div><div class="inlineBlock">
 I'm an inline-block div
 </div>

希望有帮助。。

在元素之间添加磅的注释,不包含空白。 对于我来说,将字体大小重置为零,然后再将它的设置为 back 。


<div>
 Element 1
</div><!--
--><div>
 Element 2
</div>

这是我在相关的问题上给出的答案: 显示:内联块- 什么是空间

实际上有一个非常简单的方法来从inline-block中删除空白,它既容易又有语义。 它被称为带有zero-width空格的自定义字体,它允许你使用很小的字体在字体级别折叠空白( 当内联元素位于单独的行上时由浏览器添加) 。 一旦你申报的字体,你只是改变font-family容器和回来的孩子,瞧。 就像这个:


@font-face{ 
 font-family: 'NoSpace';
 src: url('../Fonts/zerowidthspaces.eot');
 src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
 url('../Fonts/zerowidthspaces.woff') format('woff'),
 url('../Fonts/zerowidthspaces.ttf') format('truetype'),
 url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
 font-face: 'OpenSans', sans-serif;
}

.inline-container {
 font-face: 'NoSpace';
}

.inline-container> * {
 display: inline-block;
 font-face: 'OpenSans', sans-serif;
}

适合口味。这是一个下载到我刚刚在font-forge中安装的字体,并用 FontSquirrel webfont生成器转换。 占用了我 5分钟的时间。 css @font-face 声明包括: 压缩zero-width空间字体 。 它在 Google Drive中,所以你需要点击文件> 下载来保存到你的计算机。 如果你将声明复制到主css文件,你可能需要更改字体路径。

两个更多的选择基于css文本模块级 3 ( 取代了从规范草案中除去的white-space-collapsing:discard ):

  • word-spacing: -100%;

理论上,应该做什么需要—缩短'单词'之间空白的100%空格字符宽度, 换句话说,为零。 但似乎在任何地方都不起作用,这个特性被标记为'处于风险之中'( 也可以从规范中除去) 。

  • word-spacing: -1ch;

缩短了inter-word空间数字'0'的宽度。 以monospace字体表示,它应该与空间字符( 以及其他任何字符)的宽度完全相同。 这在 Firefox 10 +,Chrome 27 + 中工作,几乎在 IE9 + 中工作

小提琴

为什么不使用flexbox并为旧浏览器做一个回退( 来自上建议) 。


ul {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
}

font-size: 0 ;管理起来可能有点棘手。。

我认为下面的几行比其他方法更好,更多re-usable和时间保护。 我亲自使用:


.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

然后你可以使用它如下所示。。


<ul class="items">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

我知道( 我可能错了),但所有浏览器都支持这种方法。

解释:

这就像你预期的那样工作( 也许 -3像素可能更好) 。

  • 复制并粘贴代码( 一次)
  • 然后在你的html只用 class="items" 每个inline-block的父母。

你将不需要返回到 css,并为新的内联块添加另一个css规则。

同时解决两个问题。

同时注意 > ( 大于符号) 这意味着 */all 子级应该是 inline-block 。

http://jsfiddle.net/fD5u3/

注意:我已经修改了,以便在包装有子包装时继承 letter-spacing 。

display:inline-block的所有空间消除技术都是令人讨厌的攻击。

使用 Flexbox

它很棒,解决了所有的inline-block布局,并且 2015有 90%浏览器支持 ( 96%如果你不关心旧的配置) 。

我现在有这个问题,从 font-size:0; 我发现,在IE7中问题仍然存在,因为 IE 认为"字体大小 0"? ! wtf你是疯子?",所以,在我的例子中我和 font-size:0.01em; Ericmeyer的css重置和我有差异 1 px IE7 FF9,所以,我认为这可能是一个解决方案。

...