标题边框与标题元素重叠?

时间:2018-01-25 12:26:43

标签: html css

我正在制作定价表但由于某种原因它看起来像这样: enter image description here

绿色边框与标题文本重叠。标题文本应位于绿色部分的中间。

.avra_aside_left_content {
  box-shadow: 0px 1px 4px 0px gray;
  background: white;
}

.avra_aside_left_content .avra_pricing_title {
  background: #317579;
  height: 70px;
  text-align: center;
  color: white;
  margin-bottom: 45px;
  position: relative;
  padding: 29px 0px;
}

.bottom_ptable {
  background: #F0F8F8
}

.avra_aside_left_content .avra_pricing_title::after {
  content: '';
  display: block;
  clear: both;
  position: absolute;
  bottom: 0px;
  left: 0px;
  border-top: 48px solid #317579;
  border-bottom: 0px solid transparent;
  border-left: 171px solid transparent;
  border-right: 193px solid transparent;
  top: 100%;
  overflow: hidden;
}

.avra_main_aside {
  margin: 80px 0px 30px;
}

.avra_main_aside .avra_aside_items li {
  list-style: none;
  margin: 9px 0px;
  font-size: 16px;
}

.avra_main_aside .avra_aside_items {
  margin: 75px 50px 31px;
  box-sizing: border-box;
  overflow: hidden
}

.avra_main_aside .avra_aside_items li span.glyphicon {
  color: red;
  padding-right: 13px;
}

.avra_aside_notice p {
  font-size: 16px;
  text-align: center;
  margin-bottom: -25px;
}

.avra_aside_notice .bold_notice {
  color: red
}

.avra_main_aside .avra_price p {
  font-size: 36px;
  text-align: center;
  margin: 61px 0px 15px;
  padding-top: 20px;
  color: #f74a3f;
}

.avra_main_aside .avra_price p del {
  color: gray;
  font-weight: normal;
}

.avra_main_aside .avra_buy_btn {
  padding-bottom: 1px;
}

.avra_main_aside .avra_buy_btn a.btn-danger {
  border-radius: 0;
  margin: 0px auto 23px;
  display: table;
  background: #F74A3F;
  font-weight: bold;
  border: none;
  padding: 10px 12px;
  color: white;
}
<div class="avra_main_aside">
  <div class="avra_aside_left_content">
    <div class="avra_pricing_title">
      <h3>Avrapage Pricing</h3>
    </div>
    <div class="avra_aside_items">
      <li><span class="glyphicon glyphicon-send"></span>FREE updates for a year</li>
      <li><span class="glyphicon glyphicon-send"></span>Premium subscription forms</li>
      <li><span class="glyphicon glyphicon-send"></span>Regular updates</li>
      <li><span class="glyphicon glyphicon-send"></span>Easy to use</li>
    </div>
    <div class="avra_aside_notice">
      <p><span class="bold_notice" id="time_countdown"></span> left <br /> from this offer!</p>
    </div>
    <div class="bottom_ptable">
      <div class="avra_price">
        <p><del><sup>$</sup>79</del> &nbsp;$49</p>
      </div>
      <div class="avra_buy_btn">
        <a href="javascript:void(0)" class="btn btn-danger">BUY NOW! SAVE 38%</a>
      </div>
    </div>
  </div>
</div>

感谢任何帮助,谢谢。

0 个答案:

没有答案