html - 如何在 div 中水平居中放置 2 个按钮？

Question

我有一个 div (1140 x 180)，我需要在其中设置两个彼此相邻的按钮。理想情况下，一个按钮占据整个左侧，另一个按钮占据整个右侧。 这一切都与“Flex”有关，因为我必须尊重响应式设计。

Answer 1

您可以像这样使用 flex 属性非常简单地做到这一点:

.container {
  display:flex;
  width: 1140px;
  height: 180px;
}
.button {
  flex:1;
  height:100%;
}

<div class=“container”>
  <div class=“button”>first button</div>
  <div class=“button”>second button</div>
</div>