Question

我border-bottom上有一个<div>属性，但边框显示在顶部。我没有花车，overflow: hidden没有工作！

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

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

JSFiddle

Answer 1

你的内部div有一个绝对的位置，所以不扩展那个父div。如果您希望基本上平坦的父div在子项下方具有底部和边框，则需要为其设置高度。

'border-bottom'显示在div之上

1 个答案: