使用 css3 为所有子 html 元素设置边距

Question

我正在尝试显示左右和中间的按钮，但边距不接受。我不知道如何仅为CSS中的所有子html元素设置边距。

  .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

您不能对position ed 的元素使用 margin，这是您的情况。对于您的显示方式，我们最好这样做：

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

以上也是响应式的！全屏查看。

Answer 3

使用 ：：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 4

也许您可以尝试将wrapper设置为弹性容器，并将其子项证明为space-between

如果你想在Stackblitz上看到它与你的Angular代码，请在这里检查：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>