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

概述任何人都可以解释这种奇怪的行为,为什么在按钮之间添加额外的间距. 案件 – 以下是HTML代码,如果这样写的话,它会在按钮之间增加额外的空间 – <div class="wrapper"> <button class="btn one">First long button with a long text length</button> <button class= 任何人都可以解释这种奇怪的行为,为什么在按钮之间添加额外的间距.

案件 –

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

<div >        <button >First long button with a long text length</button>        <button >Second long button with a long text length</button>    </div>

输出 –

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

代码 –

<div >        <button >First long button with a long text length</button><button >Second long button with a long text length</button>    </div>

输出 –

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;}

解决方法 使用内联元素,换行符(和多个空格)将转换为1个空格. 总结

以上是内存溢出为你收集整理的html – 同一行上的元素不会导致按钮CSS之间出现空格全部内容，希望文章能够帮你解决html – 同一行上的元素不会导致按钮CSS之间出现空格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。