vue循环出的span之间没有间距而直接写的span之间有间距,这是为什么?

<div id="app">
    <span v-for="item in items">{{ item }}</span>
    <span>ttt</span>
    <span>sss</span>
</div>
new Vue({
    el: '#app',
    data: {
        items: ['aaa', 'bbb', 'ccc']
    },
})

显示的效果大概是这样的:

aaabbbccc ttt sss

前面循环出的span没有间距,而后面的span有间距,不知道为什么。

回答:

如果有display:inline或是display:inline-block的元素相邻,并且它们之间有换行,那么就会自动产生一段间隙。
可以在这些元素的父元素上设置font-size:0;,就可以消除换行带来的间隙。

ps:这种情况下,如果代码不换行,就不会产生间隙。

回答:

你是不是强制回车换行的,这样的话会有个间距的

回答:

行内元素的换行会占位的, 解决办法就是在你的#app中设置font-size:0; 这样换行符大小就变成了0, 就不会出现你说的间距了.

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注