Question

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

你实际上可以注意到按钮之间的小差距。我怎么能删除它。

我的css是

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

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

Answer 1

white-space元素上的HTML display: inline-block;问题，因此一个选项是删除HTML代码中的空格。或者，您可以在父级上设置font-size: 0，然后再次在子级 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>

Answer 2

如上所述，空白区域是由实际HTML中的空白区域引起的。

您可以浮动button元素，也可以使用flexbox解决此问题。

浮动

小提琴： https://jsfiddle.net/frcbn82p/3/

<强> CSS

.btn-group{
  display:inline-block;
}
.btn-group button{
  clear: none;
  float: left;
  display: inline-block;
  width:auto;
  height:40px;
  border:none;
  background-color:#4444ee;
  color:#fff;
}

Flexbox的

小提琴： https://jsfiddle.net/frcbn82p/5/

<强> CSS

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

按钮组在bootstrap css中

2 个答案:

浮动

Flexbox的