如何将Div布局转换为Ul/Li并保持格式实现国家信息展示

需求说明 #

• 从给定数据中选取任意20个国家创建HTML文档进行展示
• 每个国家需展示：国旗、名称、货币、所有地区信息
• 使用无序列表（ul/li）结构展示条目
• 通过CSS实现视觉分组（如边框、填充色），移除列表默认项目符号
• 添加维基百科跳转链接

当前问题 #

原本使用div布局可正常显示，但尝试转换为ul/li结构后格式混乱，多次调整未解决。以下是包含2个国家信息的原有代码片段：

.country-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

/* Style for each country div */
.country {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #212020;
  padding: 1em;
  text-align: center;
  background-color: beige;
}

.flag {
  /* No need for additional styles here */
}

.country h2 {
  margin: 5px 0;
}

.wiki-link {
  display: block;
  text-align: center;
  margin-top: 5px;
}

<div class="country-container">
  <div class="country">
    <img class="flag" src="country_flags/ws.png" alt="Flag of Samoa" />
    <h2>Samoa</h2>
    <p>Currency: Euros (EUR)</p>
    <p>Regions: Atua , Fa'asaleleaga , Tuamasaga
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Samoa" target="_blank">Wikipedia</a>
  </div>

  <div class="country">
    <img class="flag" src="country_flags/pk.png" alt="Flag of Pakistan" />
    <h2>Pakistan</h2>
    <p>Currency: Rupee (PKR)</p>
    <p>Regions: Azad Jammu and Kashmir , Balochistan , Gilgit-Baltistan , Islamabad , Khyber Pakhtunkhwa , Punjab , Sindh
    </p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Pakistan" target="_blank">Wikipedia</a>
  </div>
</div>

解决方案 #

只需替换容器标签并调整少量CSS，即可在保留原有布局效果的同时实现ul/li语义化结构：

修改后的CSS

.country-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  list-style: none; /* 移除列表默认项目符号 */
  padding: 0; /* 清除列表默认内边距，避免布局偏移 */
}

/* Style for each country list item */
.country {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #212020;
  padding: 1em;
  text-align: center;
  background-color: beige;
  min-width: 200px; /* 可选：防止条目过窄导致内容挤压 */
}

.country h2 {
  margin: 5px 0;
}

.wiki-link {
  display: block;
  text-align: center;
  margin-top: 5px;
}

.flag {
  /* 保留原有样式，如需调整可在此添加 */
}

修改后的HTML（已翻译为中文）

<ul class="country-container">
  <li class="country">
    <img class="flag" src="country_flags/ws.png" alt="萨摩亚国旗" />
    <h2>萨摩亚</h2>
    <p>货币：欧元（EUR）</p>
    <p>地区：阿图阿、法萨莱莱阿加、图阿马萨加</p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Samoa" target="_blank">维基百科</a>
  </li>

  <li class="country">
    <img class="flag" src="country_flags/pk.png" alt="巴基斯坦国旗" />
    <h2>巴基斯坦</h2>
    <p>货币：卢比（PKR）</p>
    <p>地区：自由克什米尔、俾路支省、吉尔吉特-巴尔蒂斯坦、伊斯兰堡、开伯尔-普赫图赫瓦省、旁遮普省、信德省</p>
    <a class="wiki-link" href="https://en.wikipedia.org/wiki/Pakistan" target="_blank">维基百科</a>
  </li>
</ul>

关键改动说明

1. 外层容器从div替换为ul，每个国家的容器从div替换为li，保持内部结构完全不变
2. 给ul.country-container添加list-style: none和padding: 0，清除列表默认样式，避免破坏原有flex布局
3. 原有flex布局逻辑完全复用，li元素支持所有flex属性，无需额外调整

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