为什么要“在线阻止"?在此CSS中无法正常工作? [英] Why "Inline-block" doesn't work properly in this 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元素之间的空间?

这篇关于为什么要“在线阻止"?在此CSS中无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！