html - 按钮和文本重叠

Question

我只是在做一个项目，无法弄清楚我的按钮发生了什么。我在按钮下方有文本 div，但由于某些原因，它们一直重叠。只是想知道是否有人知道快速修复？我尝试在两个按钮周围放置一个包装器并将其设置为显示：块，但这仍然不起作用。图片和代码如下：

.hourlyButtonContainer {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  left: 0;
  text-align: center;
  position: absolute;
  width: 50%;
  margin-bottom: 15px;
  display: block;
}

.dailyButtonContainer {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  right: 0;
  text-align: center;
  position: absolute;
  width: 50%;
  display: block;
}

#hourlyButton,
#dailyButton {
  color: #7E8959;
  width: 100%;
  height: 48px;
}

.displayContainer {
  display: block;
}

.displayContainer>div {
  display: inline-block;
  display: -moz-inline-box;
  *display: inline;
  /* For IE7 */
  zoom: 1;
  /* Trigger hasLayout */
  width: 25%;
  text-align: center;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

.nextHoursContainer {
  text-align: center;
  margin: 20px;
}

#popTrailsNextHours {
  color: #7E8959;
  text-align: center;
  border: 1px solid #7E8959;
  padding: 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

<div class="hourlyButtonContainer">
  <button id="hourlyButton" v-on:click="hourlySelected()">HOURLY</button>
</div>
<div class="dailyButtonContainer">
  <button id="dailyButton" v-on:click="dailySelected()">DAILY</button>
</div>
<div class="displayContainer">
  <div>LIVE</div>
  <div>1 PM</div>
  <div>3 PM</div>
  <div>5 PM</div>
</div>
<div class="displayContainer">
  <div>SVG</div>
  <div>SVG</div>
  <div>SVG</div>
  <div>SVG</div>
</div>
<div class="displayContainer">
  <div>Not busy</div>
  <div>Usually as busy as it gets</div>
  <div>usually a little busy</div>.
  <div>usually not too busy</div>
</div>
<div class="nextHoursContainer">
  <button id="popTrailsNextHours">NEXT 48 HOURS</button>
</div>

*** 'hourly' 和 'daily' 应该在其他文本上方 [重叠图像]

重叠图像

标签： htmlcssbuttonoverlapping