关于amp-list与导航元素的两类技术问题咨询

问题2：Footer中AMP List导航横向排列修复 #

footer里用AMP List加载导航变成垂直排列，核心原因是AMP List的默认布局没有继承手动代码的flex属性，再加上AMP要求AMP List必须有明确尺寸。你可以这样修复：

1. 保留父UL的flex布局：
   确保包裹AMP List的ul依然保留flex flex-wrap类，这样渲染出来的列表项会自动横向换行排列。
2. 设置AMP List的自适应布局：
   给amp-list添加layout="flex-item"，设置一个合适的最小height（比如50），同时将width设为auto，让它自适应内容宽度，完美融入父容器的flex布局。

修改后的footer代码示例：

<footer class="ampstart-footer flex flex-column items-center px3 ">
  <nav class="ampstart-footer-nav">
    <ul class="list-reset flex flex-wrap mb3">
      <amp-list width="auto" height="50" src="json/sidenav.json" layout="flex-item">
        <template type="amp-mustache" id="amp-template-footer">
          <li class="px1"><a class="text-decoration-none ampstart-label" href="{{url}}">{{title}}</a></li>
        </template>
      </amp-list>
    </ul>
  </nav>
</footer>

调整后，AMP List渲染的列表项会继承父ul的flex-wrap属性，保持横向排列，而且不需要硬编码width数值就能正常显示内容。

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