在 HTML/CSS 中制作列表元素 (ul/li) 移动友好/响应式

Question

我们在桌面页脚附近有一个“As Seen On”新闻栏。在桌面上它可以正常工作并且徽标都集中在一条线上。但是，它对移动设备和移动设备都是一样的，我需要将徽标堆叠起来而不是全部一行，这样您就不会在手机或平板电脑上一直滚动到右侧。

我不是 100% 确定，但我想我需要一个媒体查询，但我对格式化 CSS 有点陌生。

HTML:

 <div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
    <h2 class="page-header text-center">As Seen On</h2>
    <br>
        <ul class="press">
          <li>
            <div class="press-logo">
              <img alt="One" src="" /></a>
            </div>
            <span class="sr-only">One</span>
          </li><li>
            <div class="press-logo">
              <img alt="Two" src="" /></a>
            </div>
            <span class="sr-only">Two</span>
          </li><li>
            <div class="press-logo">
              <img alt="Three" src="" /></a>
            </div>
            <span class="sr-only">Three</span>
          </li><li>
            <div class="press-logo">
              <img alt="Four" src="" /></a>
            </div>
            <span class="sr-only">Four</span>
          </li><li>
        </ul>
</div>

CSS：

 ul.press {
  display: table;
  width: 100%;
  text-align: center;
}

ul.press > li {
  display: table-cell;
}

谢谢

原文由 Goose 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需几行 CSS 即可轻松实现您要查找的内容。您可以在这个 JSFiddle 中查看我创建（和记录）的 CSS： https ://jsfiddle.net/8oLxr7ke/

 .press {
    display: block;  /* Remove bullet points; allow greater control of positioning */
    padding: 0;      /* Override defaults for lists */
    margin: 0;       /* Override defaults for lists */
    width: 100%;     /* Get the row full width */
}

.press li {
    display: inline-block; /* Get all images to show in a row */
    width: 25%;            /* Show 4 logos per row */
    text-align: center;    /* Centre align the images */
}

@media (max-width: 960px) and (min-width: 501px) {
    .press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}

@media (max-width: 500px) {
    .press li { width: 100%; } /* On small screens, show one logo per row */
}

 <div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
    <h2 class="page-header text-center">As Seen On</h2>
        <ul class="press">
          <li>
            <div class="press-logo">
              <img alt="One" src="" />
            </div>
            <span class="sr-only">One</span>
          </li><li>
            <div class="press-logo">
              <img alt="Two" src="" />
            </div>
            <span class="sr-only">Two</span>
          </li><li>
            <div class="press-logo">
              <img alt="Three" src="" />
            </div>
            <span class="sr-only">Three</span>
          </li><li>
            <div class="press-logo">
              <img alt="Four" src="" />
            </div>
            <span class="sr-only">Four</span>
          </li><li>
        </ul>
</div>

本质上，我的代码所做的是：

• 建立一个基本的网格系统
• 在大屏幕上显示四个徽标
• 在中等屏幕上显示两个徽标
• 在小屏幕上只显示一个标志

---

如果您不想被限制为显示一定数量的徽标，您可以执行以下操作：

在 JSFiddle 上查看 https://jsfiddle.net/5m0whf3k/

 .press {
  display: table;      /* Required for table-cell to work on li's */
  padding: 0;          /* Override defaults for lists */
  margin: 0;           /* Override defaults for lists */
  width: 100%;         /* Get the row full width */
  text-align: center;  /* Centre align grid items */
}

.press li {
  display: table-cell;   /* Get all images to show in a row */
  text-align: center;    /* Centre align the images */
}

@media (max-width: 960px) and (min-width: 501px) {
  .press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}

@media (max-width: 500px) {
  .press li { width: 100%; } /* On small screens, show one logo per row */
}

@media (max-width: 960px) {
  .press {
    display: block;
  }

  .press li {
    display: inline-block;
  }
}

 <div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
    <h2 class="page-header text-center">As Seen On</h2>
        <ul class="press">
          <li>
            <div class="press-logo">
              <img alt="One" src="" />
            </div>
            <span class="sr-only">One</span>
          </li><li>
            <div class="press-logo">
              <img alt="Two" src="" />
            </div>
            <span class="sr-only">Two</span>
          </li><li>
            <div class="press-logo">
              <img alt="Three" src="" />
            </div>
            <span class="sr-only">Three</span>
          </li><li>
            <div class="press-logo">
              <img alt="Four" src="" />
            </div>
            <span class="sr-only">Four</span>
          </li><li>
            <div class="press-logo">
              <img alt="Four" src="" />
            </div>
            <span class="sr-only">Five</span>
          </li>
        </ul>
</div>

---

重要的提示：

在您的 HTML 代码中，在 </a> <img> ，但没有开放 <a> 标签 - _这是无效代码_。在我的例子中，我已经为你删除了那些。

此外，你不应该需要 <br> <h2> 和 <ul class="press"> --- 之间的 display: block; …. --- 。

原文由 Andi North 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试调整您的视口，如果问题仍然存在，然后选择媒体查询

原文由 Talitu 发布，翻译遵循 CC BY-SA 3.0 许可协议