使用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申请样式的子元素。也改变了“左”和“右” bottons位置“相对”，并使用浮点值的那些按钮对齐左右...

.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

你不能被margined，这是你的情况的元素使用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 3

使用:: NG-深选择器选择被另一个组件内定义的元素。

为了您的例子:: NG深将让你在你的元素定义的利润，像这样：

.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在此处与自己的角码校验：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>