Кнопки и текст перекрываются - PullRequest
0 голосов
/ 20 марта 2020

Я просто работаю над проектом и не могу понять, что происходит с моими кнопками. У меня есть текстовые элементы ниже кнопок, но по некоторым причинам они продолжают перекрываться. Просто интересно, кто-нибудь знает быстрое решение? Я попытался поместить обертку вокруг двух кнопок и установить ее для отображения: блок, но это все равно не сработало Изображение и код ниже:

.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>

*** «Почасовые» и «ежедневные» должны быть над другим текстом [Изображение перекрытия]

Изображение перекрытия

enter image description here

...