在 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;
}

谢谢

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;。