CSS：具有ul列表的居中和响应表

Question

我想像表一样处理一个ul列表，具有响应行为。当窗口太紧而无法显示3个内联li元素时，列表缩小以仅显示连续2个项目但保持居中。 是否有可能只用CSS做到这一点？

Schema: structure and responsive situation

HTML：

<div id="parent">
  <ul>
    <li></li>
    <li></li>
    ...
  </ul>
</div>

要求：

• 父母div有100％的宽度。左右填充是固定的（180px）。
• ul列表具有灵活的宽度，必须始终居中。
• li元素具有固定宽度（300px），必须像表格一样显示。

Answer 1

尝试使用媒体查询和无显示

    <div id="parent">
  <ul>
    <li></li>
    <li></li>
    <li class= "test"></li>
  </ul>
    </div>
<style>
@media screen and (max-width: 680px){
    ul li.test:not(:nth-child(1)) {
       display: none;
  }
}
</style>

并根据自己的喜好调整一切，希望有所帮助......