Стиль детей детей вместе - PullRequest
Новая
       9

Стиль детей детей вместе

0 голосов
/ 23 января 2019

У меня есть 3 кнопки, сгруппированные 1 отдельно от двух других, но я хочу оформить их так, как если бы они были всеми дочерними элементами одного и того же деления.

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>

Цель состоит в том, чтобы они выглядели так

enter image description here

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

Общий способ, а не каждая отдельная кнопка.Есть ли способ, которым я могу сделать это.

Это то, что мне удалось сделать до сих пор enter image description here

Я также попробовал первый в своем родеи это тоже не работает

1 Ответ

0 голосов
/ 23 января 2019

Получил это исправить таким образом.Это был сумасшедший способ, но я настоятельно рекомендовал бы вам поменять компонент.

МЕНЬШЕ здесь: 

.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>
...