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>

并根据需要调整所有内容，希望有所帮助...

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

1 个答案: