'border-bottom'显示在 div 的顶部

Question

我的<div>上有一个border-bottom属性，但边框显示在顶部。我没有浮动，overflow: hidden不起作用！

如何使边框显示在<div>的底部？

@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.text-title {
  border-bottom: 1px solid #A4A4A4;
}
.name {
  font-family: 'Pacifico', cursive;
  position: absolute;
  font-size: 26px;
  top: .5px;
  margin-top: 0px;
  left: 20px;
}
.name a {
  text-decoration: none;
  color: black;
  transition: .2s color;
}
.name a:hover {
  color: #A47D7D;
}
.links {
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  top: 23px;
  right: 50px;
}
.links a {
  color: black;
  text-decoration: none;
  margin-right: 20px;
  transition: .2s color;
}
.links a:hover {
  color: #A47D7D;
}

<div class="text-title">
  <div class="name">
    <a href="#">georetro</a>
  </div>
  <div class="links">
    <a href="#" id="about">About</a>
    <a href="#" id="portfolio">Portfolio</a>
    <a href="#" id="contact">Contact Us</a>
  </div>
</div>
<div class="slogan-area"></div>
<div class="about-me"></div>
<div class="portfolio-area"></div>
<div class="contact-us"></div>

JSFiddle

Answer 1

您的内部div的位置为absolute，因此不要展开父div。如果您希望基本平坦的父div在子div下方有底部和边框，则需要为其设置高度。