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

您不能在margin版的元素上使用position，这是您的情况。对于您显示它的方式，更好的方法是：

.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 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-container，然后将其子项调整为space-between

如果要使用Angular代码在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

只需使用::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。

希望这就是您的期望。

使用CSS3为所有子HTML元素设置边距

4 个答案: