如何在HTML页脚中实现列表与带链接图片的div并排布局

问题原因 #

• 页脚DOM结构顺序不合理：当前代码里先渲染了块级属性的ul列表，默认占满整行宽度，后续设置float:right的图片区块没有足够的横向空间，只能自动换行到列表下方
• footer宽度计算语法错误：calc(100%-80px)中减号两侧没有加空格，浏览器无法识别该属性，导致宽度规则失效
• 图片容器样式冲突：给footer div同时设置了width:60px和padding:2em，左右padding总宽度超过了容器设定宽度，加上额外的margin-left:20%属性进一步挤压了布局空间

修复方案 #

1. 调整footer内DOM顺序，把设置float:right的图片div放到所有ul列表前面
2. 修正footer宽度的calc语法，删除图片容器多余的margin和不合理的宽度、padding设置
3. 给左侧ul设置float:left，保证两个元素有横向排列的基础

调整后的代码片段 #

CSS修改部分

/* 修正footer宽度语法 */
footer {
  width: calc(100% - 80px); /* 减号两侧必须加空格才能被浏览器识别 */
  overflow: hidden;
  background-color: grey;
  padding: 40px 40px;
  margin-top: 20%;
}

footer ul {
  color: white;
  width: fit-content;
  list-style: none;
  float: left; /* 新增：给左侧列表加左浮动，支持和右侧元素并排 */
  padding: 0; /* 清除ul默认自带的内边距 */
  margin: 0; /* 清除ul默认自带的外边距 */
}

/* 修正图片容器的冲突样式 */
footer div {
  display: block;
  float: right;
  /* 删除原有的width:60px、padding:2em、margin-left:20%三个冲突属性 */
}

footer div img {
  display: block;
  width: 40px;
  margin-bottom: 10px;
}

HTML结构调整部分

<footer>
  <!-- 把图片区块放到列表前面，优先渲染浮动元素 -->
  <div>
    <a href="#">
      <img src="ab.png">
    </a>
    <a href="#">
      <img src="bc.png">
    </a>
    <a href="#">
      <img src="cd.png">
    </a>
  </div>

  <ul id="first">
    <li>
      <a href="ass.html">Home</a>
    </li>
    <li>
      <a href="seccond.html">Contact us</a>
    </li>
    <li>
      <a href="first.html">About</a>
    </li>
  </ul>

  <ul id="second">
    <li>
      <a href="ass.html">Home</a>
    </li>
    <li>
      <a href="seccond.html">Contact us</a>
    </li>
    <li>
      <a href="first.html">About</a>
    </li>
  </ul>
</footer>

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