图片列表下方文本错位问题排查及实现方案咨询

问题2：改用静态HTML实现图片展示是否可行 #

完全可行，而且这种方案更简单，无需依赖JavaScript，加载速度更快，适合你的静态展示需求。

实现思路：

1. 把各章节的图片直接写在HTML中，用独立容器区分，默认只显示第一章：

   <div class="menu">
       <!-- 第一章容器 -->
       <div class="chapter active" id="chapter1-content">
           <ul>
               <li><img src="../images/maps/chapter1/1.jpg" alt="Map 1"><p>Map 1</p></li>
               <li><img src="../images/maps/chapter1/2.jpg" alt="Map 2"><p>Map 2</p></li>
               <!-- 剩余47张图依次添加 -->
           </ul>
       </div>
       <!-- 第二章容器 -->
       <div class="chapter" id="chapter2-content">
           <ul>
               <li><img src="../images/maps/76.jpg" alt="Map 76"><p>Map 76</p></li>
           </ul>
       </div>
       <!-- 第三章、第四章同理 -->
   </div>
   

2. 用CSS控制章节的显示/隐藏：

   .chapter {
       display: none;
   }
   .chapter.active {
       display: block;
   }
   

3. 用锚点链接实现章节切换（完全无JS）：

   <div class="mappages">
       <a href="#chapter1-content">Chapter 1</a>
       <a href="#chapter2-content">Chapter 2</a>
       <a href="#chapter3-content">Chapter 3</a>
       <a href="#chapter4-content">Chapter 4</a>
   </div>
   

   对应CSS修改为：

   .chapter {
       display: none;
   }
   .chapter:target {
       display: block;
   }
   

附：原始代码 #

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map Gallery</title>
        <link rel="stylesheet" href="stylemaps.css">
    </head>

    <body onload="document.body.style.opacity='1'">

        <header>
            <h1>Map Gallery</h1>
        </header>
        
        <div class="menu">
            <ul id="imageList"></ul>
        </div>
        <div class="mappages">
            <a href="#" id="chapter1">Chapter 1</a>
            <a href="#" id="chapter2">Chapter 2</a>
            <a href="#" id="chapter3">Chapter 3</a>
            <a href="#" id="chapter4">Chapter 4</a>
        </div>

        <script src="fadeAnim.js"></script>
        <script src="mapscript.js"></script>
    </body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

body {
    background-image: url("../images/background-maps.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding:0;
    margin:0;
    opacity: 0;
    transition: opacity 1s;
}

.menu{
    background-color: rgba(255,255,255,0.5);
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    width:55%;
    height: 100%;
}

.menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu li{
    width: 20%;
    min-width: 200px;
    margin: 10px;
    text-align: center;
}

.menu img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    font-size: 75px;
    text-align: center;
    text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
    margin: auto;
}

JavaScript：

const chapter1 = [];
for (let i = 1; i <= 49; i++){
chapter1.push({src: `../images/maps/chapter1/${i}.jpg`, alt: `Map ${i}`});
}
const chapter2 = [{src: '../images/maps/76.jpg'}]; //not used yet
const chapter3 = [{src: '../images/maps/64.jpg'}]; //not used yet
const chapter4 = [{src: '../images/maps/98.jpg'}]; //not used yet

function showImages(chapter) {
    document.querySelector('#imageList').innerHTML = '';
    chapter.forEach(image => {
      const li = document.createElement('li');
      li.innerHTML = `<img src="${image.src}" alt="${image.alt}">`;
      document.querySelector('#imageList').appendChild(li);
    });
  }

  document.querySelector('#chapter1').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter1);
  });

  document.querySelector('#chapter2').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter2);
  });

  document.querySelector('#chapter3').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter3);
  });

  document.querySelector('#chapter4').addEventListener('click', function(e) {
    e.preventDefault();
    showImages(chapter4);
  });

  showImages(chapter1);

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