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

Question

我有一个 border-bottom我的属性(property)<div>但边框出现在顶部。我没有花车和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 具有绝对位置，因此不会扩展该父 div。如果您希望基本平坦的父 div 在子项下方有底部和边框，则需要为其设置高度。