前端新手求助：如何将链接定位在文本右侧并保持内联排列

嘿，我来帮你搞定这个布局需求！先梳理下现有代码里的小问题：当前.footer-text是块级元素，<ul>也是块级，所以它们会自动换行；另外你的padding设置得太大，会让元素间距变得夸张，影响布局效果。接下来我给你调整代码，实现Contact在左、链接在右且内联排列的效果：

第一步：调整HTML结构 #

把Contact文本和列表放进同一个容器里，方便用Flex布局控制对齐：

<div class="footer">
  <div class="footer-container">
    <div class="footer-text">Contact</div>
    <ul class="footer-links">
      <li><a href="email.html" class="footer-contact">Email</a></li>
      <li><a href="linkedin.html" class="footer-contact">LinkedIn</a></li>
      <li><a href="instagram.html" class="footer-contact">Instagram</a></li>
    </ul>
  </div>
</div>

第二步：修改CSS样式 #

用Flex布局实现左右对齐，同时调整元素的间距和显示方式：

.footer { 
  grid-area: footer; 
  margin: 38px 100px 0; /* 简化margin写法 */
  height: 700px;
  display: flex;
  align-items: center; /* 让容器内元素垂直居中，可根据需求调整 */
}

.footer-container {
  width: 100%; /* 占满父容器宽度 */
  display: flex;
  justify-content: space-between; /* 实现左右两端对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.footer-text { 
  font-family: "Khula", sans-serif; 
  font-size: 80px; 
  color: #222222;
  /* 去掉原来过大的padding，避免不必要的间距 */
}

.footer-links {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* 让列表项横向排列 */
  gap: 60px; /* 控制链接之间的间距，比用padding更灵活 */
}

.footer-contact { 
  font-family: "Khula", sans-serif; 
  font-size: 35px; 
  color: #222222; 
  letter-spacing: -1px; 
  text-decoration: none;
  /* 去掉原来过大的padding，改用gap控制间距 */
}

关键调整说明： #

• 用footer-container的display: flex和justify-content: space-between，直接实现Contact左、链接右的对齐效果
• 给footer-links设置display: flex，让列表项横向内联排列，用gap控制链接间距比padding更可控
• 移除了原来过大的padding，避免元素被不必要的内边距撑开
• 可以通过调整align-items控制元素的垂直位置，比如改成flex-start或者flex-end来改变垂直对齐方式

这样调整后，就能完美实现你想要的布局啦！

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