如何排列菜单按钮 HTML答案

【问题标题】：How to arrange the menu buttons HTML如何排列菜单按钮 HTML
【发布时间】：2021-02-16 23:03:01
【问题描述】：

站点菜单有 5 个按钮。它们的排列必须使四个按钮排成两排，每排两个，一个在这些按钮的顶部。

.button__group {
  width: 500px;
  border: 1px solid lightgrey;
  border-radius: 15px;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.header .button__group .button__group__link {
  width: 250px; 
}
.header .button__group .button__group__link:nth-child(1) {
  left: 0; 
}
.header .button__group .button__group__link:nth-child(2) {
  left: 50%; 
}
.header .button__group .button__group__link:nth-child(3) {
  left: 0; 
}
.header .button__group .button__group__link:nth-child(4) {
  left: 50%; 
}

<div class="button__group">
  <div class="d-flex justify-content-center">
    <div class="button__group__link">
      <a href="#">Job Offer</a>
    </div>
    <div class="button__group__link">
      <a href="#">Clients</a>
    </div>
    <div class="button__group__link">
      <a href="#">Shop</a>
    </div>
    <div class="button__group__link">
      <a href="#">Contact us</a>
    </div>
    <div class="button__group__link">
      <a href="#">Life chat</a>
    </div>
  </div>
</div>

实时聊天按钮应位于块的中间。如图 BTN layout

【问题讨论】：

标签： html css

【解决方案1】：

我使用:first-of-type 使第一个链接包装器全宽，然后它们在 2 列中，宽度为 48%

.button__group {
  width: 500px;
  border: 1px solid lightgrey;
  border-radius: 15px;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.d-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.button__group__link {
  width: 48%;
  display: flex;
}


.button__group__link a {
  margin: auto;
}
.button__group__link:first-of-type {
  width: 100%;
}

<div class="button__group">
  <div class="d-flex justify-content-center">
    <div class="button__group__link">
      <a href="#">Job Offer</a>
    </div>
    <div class="button__group__link">
      <a href="#">Clients</a>
    </div>
    <div class="button__group__link">
      <a href="#">Shop</a>
    </div>
    <div class="button__group__link">
      <a href="#">Contact us</a>
    </div>
    <div class="button__group__link">
      <a href="#">Life chat</a>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您还需要将按钮Job Offer居中：

.button__group {
  width: 500px;
  border: 1px solid lightgrey;
  border-radius: 15px;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.d-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.button__group__link {
  width: 48%;
  display: flex;
}


.button__group__link a {
  margin: auto;
}
.button__group__link:first-of-type {
  width: 100%;
  align-self: center;
  position: fixed;
  display: flex;
}

<div class="button__group">
  <div class="d-flex justify-content-center">
    <div class="button__group__link">
      <a href="#">Job Offer</a>
    </div>
    <div class="button__group__link">
      <a href="#">Clients</a>
    </div>
    <div class="button__group__link">
      <a href="#">Shop</a>
    </div>
    <div class="button__group__link">
      <a href="#">Contact us</a>
    </div>
    <div class="button__group__link">
      <a href="#">Life chat</a>
    </div>
  </div>
</div>

【讨论】：