为什么要“在线阻止"?在此CSS中无法正常工作?

本文介绍了为什么要“在线阻止"?在此CSS中无法正常工作?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

请检查下面的CSS.

/*rex is the container of ex,ex2,ex3*/ div.rex{ height:200px; border:0px; margin:60px auto; padding: 0; vertical-align:top; } div.ex{ width:34%; height:200px; background-color:#4f443a; display:inline-block; margin: 0; padding: 0; vertical-align:top; } div.ex2{ width:0.5%; height:200px; display:inline-block; margin: 0; padding: 0; vertical-align:top; } div.ex3{ width:65.5%; height:200px; background-color:#7e8547; display:inline-block; margin: 0; padding: 0; vertical-align:top; }

浏览器中的结果:

我需要什么:

推荐答案

这实际上是HTML中预期的行为.因为您使用的是内联块，所以元素之后和另一个内联元素之前的任何换行符或空格都将被计为一个空格.如果您希望块像图片中那样并排堆叠，则HTML必须像这样.

This is actually expected behavior in HTML. Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.

<div class="rex"> <div class="ex"></div><div class="ex2"></div><div class="ex3"></div> </div>

工作演示

这不是很漂亮，但是我还是建议使用另一种方法，可能是浮动元素.

It's not very pretty, but then again, I would recommend using another approach, possibly floating the elements instead.

有关发生这种情况的原因的更多详细信息，请参阅此处.

Refer to here for a more in depth explanation of why this occurs.

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