Установить поля для всех дочерних элементов HTML, используя css3

Question

Я пытаюсь показать кнопки влево и вправо и в центре, но поле не принимает.Я не знаю, как установить поля только для всех дочерних элементов HTML в CSS.

  .wrapper * {
  position: fixed;
  background-color: #ccc;
  height: 60px;
  padding: 10px;
  bottom: 0;
  left: 0;
  width: 100%;
}

.wrapper>* {
  color: green;
  /* margin:12px*?
}

<div class="wrapper">
  <button class="left">
    Button 1
  </button>

  <button class="center">
    Button 2
  </button>

  <button class="right">
    Button 3
  </button>
</div>

Answer 1

Просто используйте ::ng-deep, чтобы применить стили для дочерних элементов.Также измените положение левого и правого нижних ячеек на «относительное» и используйте значения с плавающей запятой для этих кнопок, чтобы выровнять левое и правое ...

.wrapper::ng-deep *{
  margin:5px 8px 4px 2px;
  text-align:center;
}

.left, .right{
  position: relative;
}
.left{
  float: left;
}
.right {
  float: right;
}

Проверьте это сейчас: https://stackblitz.com/edit/amexio-breadcrumb-demo-v7dtrb?file=src/app/app.component.css.

Надеюсь, это то, что вы ожидаете.

Answer 2

Используйте селектор :: ng-deep, чтобы выбрать элементы, которые определены внутри другого компонента.

Для вашего примера :: ng-deep позволит вам определить поля для ваших элементов следующим образом:

.wrapper{
  position: fixed;
  background-color: #ccc;
  height: 60px;
  padding: 10px;
  bottom: 0;
  left: 0;
  width: 100%;
}

.wrapper ::ng-deep button {
  margin:0 20px;
}

В качестве альтернативы, вы можете разместить их равномерно, используя CSS-flexbox, например:

.wrapper{
  position:fixed;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color:#ccc;
  height:60px;
  padding:10px;
  bottom:0;
  left:0;
  width:100%; 
  }
.wrapper ::ng-deep button{
  margin: 0 10px;
  flex: 1 1 auto;
  }

Answer 3

Может быть, вы можете попытаться установить wrapper в качестве flex-контейнера, а в качестве оправдания его потомков укажите space-between

Если вы хотите увидеть его в Stackblitz с вашим угловым кодом, проверьте здесь: https://stackblitz.com/edit/amexio-breadcrumb-demo-m1c8xp

РЕДАКТИРОВАТЬ: Добавлен еще один пример для центрированных кнопок

.wrapper {
  display: flex;
  position: fixed;
  background-color: #ccc;
  height: 60px;
  padding: 10px;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  justify-content: space-between;
}

.wrapper * {
  color: green;
  /*flex: auto; Uncomment this if you want the buttons to span the full width of the container*/
}

.wrapper2 {
  display: flex;
  position: fixed;
  background-color: #ccc;
  height: 60px;
  padding: 10px;
  bottom: 100px;
  left: 0;
  right: 0;
  max-width: 100%;
  justify-content: center;
}

<div class="wrapper">
  <button class="">
    Button 1
  </button>

  <button class="">
    Button 2
  </button>

  <button class="">
    Button 3
  </button>
</div>

<div class="wrapper2">
  <button class="">
    Button 1
  </button>

  <button class="">
    Button 2
  </button>

  <button class="">
    Button 3
  </button>
</div>

Answer 4

Вы не можете использовать margin для элементов, которые position ed, что является вашим случаем.Для вашего способа показать это лучше мы можем сделать так:

.wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.left, .right {
  position: absolute;
  left: 0;
}
.right {
  left: auto;
  right: 0;
}

button {
  background: #f90;
  border: 1px solid #960;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
}

<div class="wrapper">
  <button class="left">Button 1</button>
  <button class="center">Button 2</button>
  <button class="right">Button 3</button>
</div>

И выше тоже отзывчивый!Проверьте это на весь экран.