求助：如何在Logo下方显示元素及添加底部边框？

嘿，我来帮你搞定这两个问题！先看看你现有代码里的核心问题，再一步步解决～

问题根源分析 #

你给.logopix加了position: absolute，这会让这个元素脱离正常的文档流——简单说就是它不再占据页面的物理空间，后面的.menu元素会直接往上“补位”，自然就没法显示在Logo下方了。另外你写的border: 2rem red solid边框太粗（2rem大概是32px），可能也会导致视觉上的混乱。

1. 让元素正常显示在Logo下方 #

我们需要把.logopix拉回文档流，同时保持它的居中效果，修改CSS如下：

.logo {
  position: relative;
  display: block;
  text-align: center; /* 让内部元素水平居中 */
}
.logopix {
  margin: 0 auto; /* 替代absolute的居中方式，保持在文档流内 */
  height: 7rem;
  /* 去掉position:absolute、top、left、transform这些脱离流的属性 */
}
.menu {
  display: block;
  border: 2px solid red; /* 把2rem改成合理的粗细，比如2px */
  margin-top: 1rem; /* 和Logo拉开点距离，视觉更舒服 */
  padding: 0.5rem; /* 可选，给菜单内容加内边距 */
}

这样修改后，.logopix会正常占据页面空间，.menu就会自动排在它的下方啦。

2. 给Logo下方添加边框 #

有两种常用方式，看你想要哪种视觉效果：

方式一：给Logo容器（.logo）加底部边框 #

适合希望边框贯穿整个容器宽度的情况：

.logo {
  position: relative;
  display: block;
  text-align: center;
  border-bottom: 2px solid #ccc; /* 边框颜色、粗细可自定义 */
  padding-bottom: 1rem; /* 让边框和Logo之间保留间距 */
}

方式二：给Logo图片（.logopix）加底部边框 #

适合只在Logo本身下方显示边框的情况：

.logopix {
  margin: 0 auto;
  height: 7rem;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem; /* 可选，调整边框和下方元素的间距 */
}

完整示例代码 #

把HTML和CSS结合起来，效果更直观：

<!DOCTYPE html>
<html>
<head>
  <style>
    .logo {
      position: relative;
      display: block;
      text-align: center;
      border-bottom: 2px solid #ddd; /* 容器底部边框 */
      padding-bottom: 1rem;
    }
    .logopix {
      margin: 0 auto;
      height: 7rem;
    }
    .menu {
      display: block;
      border: 2px solid red;
      margin-top: 1rem;
      padding: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="logo">
    <img class="logopix" src="your-logo-image.png" alt="网站Logo">
  </div>
  <div class="menu">
    这里是菜单内容
  </div>
</body>
</html>

你可以根据自己的需求调整边框的颜色、粗细，还有元素之间的间距～

内容的提问来源于stack exchange，提问作者Jury