使用 inline-block 重叠按钮答案

【问题标题】：Overlapping buttons using inline-block使用 inline-block 重叠按钮
【发布时间】：2017-06-18 12:57:29
【问题描述】：

可能是一个明显的解决方案，但是当我希望它们并排对齐时，我似乎无法弄清楚为什么我的两个按钮一个在另一个之上（#btn-color 直接在 #btn-icon 顶部）一边。

#btn-color,
#btn-icon {
  display: inline-block;
}

#btn-icon a {
  font-weight: 600;
  font-size: 1.15em;
  padding: 15px 20px 15px 43px;
}

#btn-color a {
  font-weight: 600;
  padding: 20px 35px;
  border-radius: 5px;
  border: 2px solid transparent;
  color: #fff;
  background-color: #d11e5d;
}

<div id="ftr-icn-wrap" class="flex">
  <div id="btn-icon"><a href="#">professional</a></div>
  <div id="btn-color"><a href="#">Contact me</a></div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

默认情况下，您的锚元素是display: inline。因此，不考虑顶部和底部填充。将它们更改为display: inline-block。

#btn-color, #btn-icon {
  display: inline-block;
}

#btn-icon a {
  font-weight: 600;
  font-size: 1.15em;
  padding: 15px 20px 15px 43px;
  display: inline-block; /* new */
}

#btn-color a {
  font-weight: 600;
  padding: 20px 35px;
  border-radius: 5px;
  border: 2px solid transparent;
  color: #fff;
  background-color: #d11e5d;
  display: inline-block; /* new */
}

<div id="ftr-icn-wrap" class="flex">
  <div id="btn-icon"><a href="#">professional</a></div>
  <div id="btn-color"><a href="#">Contact me</a></div>
</div>

【讨论】：