50％内联块不会彼此相邻显示

问题描述

说我有

<span class="ib-half"></span>
<span class="ib-half"></span>

和

.ib-half {
    display: inline-block;
    width: 50%;
}

我希望两个跨度并排显示， t。没有边距，填充或边框，所以有什么问题？

I expect the two spans to display side-by-side but they won't. There's no margin, padding, or border, so what's the problem?

推荐答案

实际的问题是两个元素。因为它是一个inline-block元素，它注册的空间，所以它的50％+的空间。

The actual problem is the space (newline) between the two elements. Because it's an inline-block element, it registers the space, so it's 50% + the space.

一些可能性：

<span class='left'>Left</span><!--
--><span class='right'>Right</span>

或< span class ='left'>左< / span> ;< span class ='right'>右< / span>

或

<span class='left'>Left</span><span
class='right'>Right</span>

或对我来说，这可能是最有意义 float：left; 并将其更改为 display：block 元素。我相信内联元素的本质是以与文本相同的方式操作，有一些额外的空间信息，所以为什么当没有理由时得到黑客？

or to me it really probably makes the most sense to float: left; and change it to a display: block element. I believe the nature of inline elements is to operate in the same manner as text with some extra spacial information, so why get hacky when there's no reason to?

这篇关于50％内联块不会彼此相邻显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！