css - 如何在文本容器中将按钮向右对齐？

Question

我有容器，其中有三个子元素：h2、p 和按钮。我想在 h2 和 p 对齐的中心右侧制作一个按钮。html 不能更改，只能使用 flexbox 或网格的 css。

div {
  background: rgba(0,0,0, .5);
  padding: 20px 40px;
  color: #fff;
}

div h2 {
  margin-bottom: 20px;
}
div p {
  margin: 0
}

div button {
  padding: 15px 20px;
}

<div>
  <h2>Test</h2>
  <p>Description test description</p>
  <button>submit</button>
</div>

标签： cssflexboxcss-grid

Answer 1

您可以使用 CSS Grid 更改button位置：

div {
  background: rgba(0,0,0, .5);
  padding: 20px 40px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

div h2 {
  margin-bottom: 20px;
}

div p {
  margin: 0
}

div button {
  padding: 15px 20px;
    grid-column: 2;
    grid-row: 1;
}

<div>
  <h2>Test</h2>
  <p>Description test description</p>
  <button>submit</button>
</div>