前端新手求助：嵌套div布局偏移问题，附HTML/CSS代码求修复方案

嗨，别慌！刚接触前端遇到这种小问题太正常了，我帮你梳理下问题所在以及修复方法：

问题定位 #

先看你的代码，有两个关键问题导致子div位置异常：

1. CSS选择器错误：你写的company-name是元素选择器，但HTML里对应的是类class="company-name"，所以应该用.company-name（类选择器）才能正确选中这个元素，之前的样式根本没生效！
2. 缺少布局控制：默认情况下div是块级元素，每个子div会独占一行，如果你希望它们横向排列或者有更规整的布局，需要给父容器.footer设置布局规则。

修复方案 #

下面是调整后的完整代码，我做了这些优化：

• 修正类选择器的写法
• 给.footer添加flex布局，让子元素横向排列，同时设置垂直居中、间距等，让布局更整齐
• 去掉了a标签里多余的<br>，用CSS控制间距更规范

修正后的CSS代码

.footer { 
  grid-column:1/-1; 
  background-color: white; 
  /* 添加flex布局控制子元素排列 */
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 2rem; /* 子元素之间的间距 */
  padding: 1rem; /* 给footer添加内边距，避免内容贴边 */
}
.company-name { 
  font-family: 'Dosis', sans-serif; 
  color:black; 
  font-size: 1.2em; 
  /* 让公司名称占满剩余空间，其他元素靠右 */
  flex-grow: 1;
}
.footer > div > a{ 
  font-family: 'Dosis', sans-serif; 
  color:black; 
  font-size: 1em; 
  text-decoration:none; 
}

修正后的HTML代码

<div class="footer">
  <div class="company-name">The Spooky Side © 2019</div>
  <div class="contact"><a href="">contact</a></div>
  <div class="privacy-policies"><a href="">-privacy policies</a></div>
  <div class="cookies"><a href="">-cookies</a></div>
</div>

额外说明 #

如果你希望子元素是垂直排列的，只需要把.footer的flex-direction改成column，调整下对齐方式就行：

.footer {
  /* ...其他样式不变 */
  flex-direction: column;
  align-items: flex-start; /* 左对齐，默认是居中 */
}

这样调整后，子div的位置就会规整啦，有其他细节要调整的话随时问~

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