Question

有这个：

  <label>
    <button>Create</button>
  </label>

我想让按钮像这样对齐

----------------------------
|                   [create]|
----------------------------

同时拥有：

  <label>
    <button>Delete</button>
    <button>Update</button>
  </label>

我希望按钮位于角落

----------------------------
|[delete]          [update]|
----------------------------

不向标签添加其他类。

Answer 1

您可以在margin-left: auto上使用last-child，这样可以产生预期效果。

label {
  display: flex;
  border-bottom: 1px solid #aaa;
  margin: 20px 0;
}
label button:last-child {
  margin-left: auto;
}

<label>
  <button>Create</button>
</label>

<label>
  <button>Delete</button>
  <button>Update</button>
</label>

Answer 2

除了标准的flexbox属性之外，您可以使用其他任何内容：

flex-direction: row-reverse - 将项目排成一行，从＆＃34;结束＆＃34; （取决于阅读方向）
justify-content: space-between - 尽可能远离彼此放置物品

＆＃13;

label {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

＆＃13;

<label>
  <button>Create</button>
</label>

<label>
  <button>Delete</button>
  <button>Update</button>
</label>

＆＃13;

Answer 3

您可以使用CSS Flexbox justify-content属性来对齐元素。

看一下 Codepen 。

或者查看下面的代码以供参考，我也使用<div>代替<label>，就像.two他们对两个按钮一样。< / p>

＆＃13;

div {
  display: flex;
  background: #ddd;
  padding: 10px 20px;
  margin-bottom: 10px;
}

div:first-child {
  justify-content: flex-end;
}

div:nth-child(2) {
  justify-content: space-between;
}

＆＃13;

<div>
  <button>Create</button>
</div>

<div>
  <button>Delete</button>
  <button>Update</button>
</div>

＆＃13;

详细了解CSS Flexbox

希望这有帮助！

Flexbox证明内容取决于孩子的数量

3 个答案: