html - 在 bootstrap css 中的按钮组

Question

我需要创建一个与 bootstrap css 非常相似的 btn 组类。我创建了它，但我无法填补按钮之间的空白，也无法映射按钮之间的原因。

https://jsfiddle.net/frcbn82p/

您实际上可以注意到按钮之间有一个小间隙。我怎样才能删除它。

我的CSS是

    .btn-group{
  display:inline-block;
}
.btn-group button{
  width:auto;

  height:40px;
  border:none;
  background-color:#4444ee;
  color:#fff;
}

Answer 1

display: inline-block; 元素上的 HTML white-space 问题，因此一种选择是删除 HTML 代码中的空格。或者您可以在 parent 上设置 font-size: 0，然后在 child 上再次更改它 Demo .或者您可以在 HTML 中使用注释 Demo .或者你可以只使用 display: flex; Demo

.btn-group{
  display:inline-block;
}

.btn-group button{
  width:auto;
  height:40px;
  border:none;
  background-color:#4444ee;
  color:#fff;
}

<div class="btn-group">
  <button>Hello World</button><button>Hello World</button>
</div>