inline-block属性为什么没有生效

问题分析

inline-block属性大家都知道用于实现块级元素可以像行级元素那样一列显示,在改造博客评论框时遇到这样一个问题,在博客的评论框里,有两个元素,一个是MarkDown的链接,一个是提交按钮。

捕获.PNG

小m是一个链接,右边这个是提交按钮

yyy

yyy

这两个元素的样式如上,按照正常情况,应该是两个元素在同一行,左边是小m右边是提交按钮,按照正常情况,我已经给两个元素设置了inline-block,他们应该是在一行显示才对,但是诡异的是提交按钮换了一行到第二行去了。

解决办法

在百度搜关键词进行搜索,搜到的信息都是各个复制粘贴,完全没用,无奈,最后通过外网搜索,终于在StakOverflow上找到答案了,



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>
这位网友的意思是:这实际上是 HTML 中的预期行为。因为您使用的是内联块,所以在元素之后和另一个内联元素之前的任何换行符或空格都将被计为空格。

我看了看我的代码发现,两个div之间有换行

yyy

我把两个div之间的换行去掉了,结果是终于将两个元素放在一行显示了。

????????????

{{allCount}} 评论
{{item.nickName}}{{item.email}}{{item.webSiteUrl}}
{{item.createTime}}回复

{{item.content}}

{{item2.nickName}}{{item2.createTime}}

@{{item.nickName}} {{item2.content}}