html元素同一行显示不出来,html – 同一行上的元素不会导致按钮CSS之间出现空格...

任何人都可以解释这种奇怪的行为,为什么在按钮之间添加额外的间距.

案件 –

以下是HTML代码,如果这样写的话,它会在按钮之间增加额外的空间 –

First long button with a long text length

Second long button with a long text length

输出 –

但如果我这样写,那么就没有空间了 –

代码 –

First long button with a long text lengthSecond long button with a long text length

输出 –

CSS代码 –

* {

margin: 0;

padding: 0;

}

.wrapper {

padding: 10px;

}

.btn {

font-size: 14px;

line-height: 28px;

background: #FFFFFF;

border: 1px solid #C3C3C3;

position: relative;

padding: 10px;

display: inline;

}

.btn:before {

content: "";

position: absolute;

width: 4%;

height: 5px;

background: #FFF;

right: 0px;

top: -5px;

}

.two {

display: inline;

}