一起给孩子们的孩子们造型

Question

我有3个按钮，它们与其他两个按钮分开1个，但我想为其设置样式，就像它们都是同一div的孩子一样。

https://codepen.io/naomilea/pen/jdEojJ

.button-group {
  display: inline-flex;
  *[class^="ics-"] {
    border: 1px solid gray;
    padding: 5px 8px;
  }
  *[class^="ics-"] {
    +[class^="ics-"] {
      margin-left: -1px
    }
    &:first-child {
      border-radius: 6px 0 0 6px
    }
    &:last-child {
      border-radius: 0 6px 6px 0
    }
  }
}

<span class="fr hover-click button-group" style="cursor: pointer;">
<i class="ics-subtract"></i>
<div style="margin-left: 0px;">
<span class="ics-drag"></span>
<span style="cursor: pointer;">
<i class="ics-trash"></i>
</span>
</div>
</span>

目标是让他们看起来像这样

but sometimes it will only be two buttons or even one so I need to style them in a 

一般方法，而不是每个单独的按钮。有办法吗？

到目前为止，这是我设法做到的

我也尝试过第一种类型，但它也不起作用

Answer 1

以这种方式解决了。这是一种疯狂的做法，但强烈建议您更改组件。

在这里少

.button-group {
  line-height: 0;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  border: 1px solid gray;
  border-radius: 6px;
  overflow: hidden;
  span, div {
    line-height: 0;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
  }
  *[class^="ics-"] {
    display: inline-block;
    vertical-align: middle;
    border-left: 1px solid gray;
    padding: 5px 8px;
    margin-left: -1px;
  }
}

.button-group {
  line-height: 0;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  border: 1px solid gray;
  border-radius: 6px;
  overflow: hidden;
}
.button-group span,
.button-group div {
  line-height: 0;
  display: inline-block;
  vertical-align: middle;
}
.button-group *[class^="ics-"] {
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid gray;
  padding: 5px 8px;
  margin-left: -1px;
}

<div class="fr hover-click button-group" style="cursor: pointer;">
  <i class="ics-subtract"></i>
  <div style="margin-left: 0px;">
    <span class="ics-drag"></span>
    <span style="cursor: pointer;">
      <i class="ics-trash"></i>
    </span>
  </div>
</div>