FreeCodeCamp致敬页开发求助：无序列表居中与响应式图片实现

核心修复点 #

• 修正HTML语法错误
• 实现无序列表居中显示
• 让图片自适应不同屏幕尺寸
• 修复内容溢出等布局问题

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Tribute Page" />
    <title>Tribute Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1 id="title">Dr. Norman Borlaug</h1>
      <p>The man who saved a billion lives</p>
    </header>
    <main>
      <div id="img-div">
        <!-- 修正：替换非标准<image>为标准<img>，添加alt属性提升可访问性 -->
        <img 
          src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" 
          class="image"
          alt="Dr. Norman Borlaug training biologists in Mexico"
        >
        <figcaption id="img-caption">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
      </div>
      <h3>Here's a time line of Dr. Borlaug's life:</h3>
      <div id="tribute-info">
        <!-- 修正：闭合class属性的引号 -->
        <ul class="tribute-info">
          <li><span>1914</span> - Born in Cresco, Iowa </li>
          <li><span>1933</span> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
          <li><span>1935</span> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
          <li><span>1937</span> - Finishes university and takes a job in the US Forestry Service</li>
          <li><span>1938</span> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.</li>
          <li><span>1941</span> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.</li>
          <li><span>1942</span> - Receives a Ph.D. in Genetics and Plant Pathology</li>
          <li><span>1944</span> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major climate on Earth.</li>
          <li><span>1945</span> - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
          <li><span>1953</span> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.</li>
          <li><span>1962</span> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population</li>
          <li><span>1970</span> - receives the Nobel Peace Prize</li>
          <li><span>1983</span> - helps seven African countries dramatically increase their maize and sorghum yields</li>
          <li><span>1984</span> - becomes a distinguished professor at Texas A&M University</li>
          <li><span>2005</span> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."</li>
          <li><span>2009</span> - dies at the age of 95.</li>
        <!-- 修正：替换错误的<ul>为闭合标签</ul> -->
        </ul>
      </div>
    </main>
  </body>
</html>

修改后的CSS代码 #

/* 全局布局：去掉固定height，让内容自然撑开；设置max-width避免大屏幕过宽 */
body{
  margin: 30px auto 0; /* 合并margin-top到统一margin属性 */
  background-color: rgba(230, 230, 230, 0.6); /* 修正RGBA语法：alpha值需包含在rgba()内 */
  max-width: 900px; /* 限制最大宽度，提升阅读体验 */
  border-radius: 10px;
  padding: 0 15px 20px; /* 增加底部内边距，避免内容贴底 */
}

h1{
 padding-top: 50px;
 text-align: center;
}

figcaption{
  text-align: center;
  padding: 0 10px 15px; /* 增加左右内边距，小屏幕避免文字贴边 */
}

p, h3{
  text-align: center;
}

/* 图片容器：去掉固定height，用padding自适应内容高度 */
#img-div{
  width: 100%;
  background-color: #ffffff;
  padding: 15px; /* 增加内边距，让图片和容器有间距 */
  box-sizing: border-box; /* 让padding包含在宽度内，避免溢出 */
  border-radius: 5px;
}

/* 响应式图片：max-width:100%确保不超出容器，height:auto保持比例 */
#img-div .image{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px; /* 调整margin，让图片和figcaption有间距 */
}

span{
  font-weight: bold; 
}

#tribute-info{
  padding-bottom: 10px;
  margin: 0 auto;
  max-width: 600px; /* 限制内容宽度，提升阅读体验 */
}

/* 列表居中：让ul块级居中，li保持默认块级，设置内边距优化布局 */
.tribute-info{
  margin: 20px auto;
  padding-left: 0; /* 去掉默认内边距，避免偏移 */
}

.tribute-info li{
  margin: 15px 0;
  line-height: 1.6; /* 用相对行高，比固定px更适配不同字体 */
  padding-left: 20px; /* 增加左侧内边距，让列表项更整齐 */
}

关键修复说明 #

1. HTML语法修正

   • 替换非标准<image>标签为HTML标准<img>，并添加alt属性提升可访问性
   • 修复<ul>标签的引号未闭合、结束标签写错的问题

2. 列表居中实现

   • 给tribute-info容器设置max-width，控制内容宽度提升阅读体验
   • 让<ul>通过margin: 20px auto实现块级居中，<li>保持默认块级显示，避免之前inline-block导致的布局混乱
   • 给<li>增加左侧内边距，优化列表项的视觉对齐

3. 图片自适应实现

   • 去掉图片固定height，改用max-width:100%和height:auto，确保图片在任何屏幕下自适应容器宽度且保持比例
   • 给图片容器#img-div去掉固定height，改用padding控制间距，容器高度随图片自动调整
   • 增加box-sizing: border-box，确保容器内边距不会导致宽度溢出

4. 其他布局优化

   • 去掉body的固定height:600px，避免内容溢出无法显示
   • 修正RGBA颜色语法错误
   • 用相对行高line-height:1.6替代固定30px，适配不同字体大小

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