在HTML/CSS中创建列表元素（ul/li）移动友好/响应

我们在桌面的页脚附近有一个“如图所示”的新闻栏。在桌面上，它工作正常，标志都在一条线上居中。但是，它对手机和手机也一样，我需要将徽标堆叠起来，而不是全部一行，这样你就不会在手机或平板电脑上一直向右滚动

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

HTML:

---

谢谢

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

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
document.getElementById（“header1”）.classList.toggle（“relative”）；
document.getElementById（“按钮图标”）.classList.toggle（“更改图标”）；
}

.wrap{
最小高度：计算（100vh-86px）；
}
a{
文字装饰：无；
颜色：#666666；
}
标题{
文本对齐：居中；
}
收割台分区{
}
#第一组h1{
颜色：#000000；
浮动：左；
利润率：10px0；
}
#滑块{
文本对齐：居中；
边框：1px实心#34c489；
背景：线性渐变（到顶部，#34c489，rgba（52196137，0.30），rgba（52196137，0）），url（../img/england_scape_2-wallper-2880x1620.jpg）；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
}
.拳击{
最大宽度：70%；
保证金：0自动；
}
#滑块的img_{
填充：0；
保证金：0；
宽度：100px；
填充顶部：20px；
}
副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题{
字号：1em；
}
/*==================*/
.dropbtn{
颜色：白色；
填充：16px；
边界：无；
高度：56px；
宽度：56px；
背景位置：中心；
背景大小：60%；
背景色：黑色；
背景重复：无重复；
}
.下拉列表{
显示：内联块；
浮动：对；
}
.下拉内容{
显示：无；
列表样式类型：无；
填充：0；
保证金：0；
字号：1.5em；
}
.下拉列表内容li{
填充：5px0；
}
.下拉列表内容li a{
颜色：#fff；
}
.下拉列表内容li:悬停{
背景色：rgba（6424710.36）；
}
.表演{
显示：内联；
宽度：100%；
位置：绝对位置；
左：0；
顶部：56px；
背景色：#34c489；
}
.亲戚{
位置：相对位置；
}
.更改图标{
背景位置：中心；
背景大小：60%；
背景颜色：绿色；
背景重复：无重复；
}
@媒体屏幕和屏幕（最小宽度：680px）{
#第一组h1{
浮动：左；
左侧填充：40px；
颜色：#000000；
利润率：10px0；
}
.下拉列表内容li{
显示：内联块；
右边填充：20px；
字号：1em；
利润率：10px0；
}
.下拉列表内容li a{
颜色：#000000；
}
.浮动{
浮动：左；
宽度：28%；
填充：2%；
}
.clear_fix:：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
#滑块的img_{
宽度：250px；
}
.dropbtn{
显示：无；
}
.下拉内容{
显示：块；
浮动：对；
右边填充：50px；
保证金：0；
}
.下拉列表内容li:悬停{
背景色：透明；
}
}

最佳城市指南|巴内






最佳城市指南
城市

只需几行CSS就可以轻松实现您想要的内容。您可以在此JSFIDLE中查看我创建（并记录）的CSS：

。按{
显示：阻止；/*删除项目符号；允许更好地控制定位*/
填充：0；/*覆盖列表的默认值*/
边距：0；/*覆盖列表的默认值*/
宽度：100%；/*获取行的全宽*/
}
.李记者{
显示：内联块；/*获取要在一行中显示的所有图像*/
宽度：25%；/*每行显示4个徽标*/
文本对齐：居中；/*居中对齐图像*/
}
@介质（最大宽度：960像素）和（最小宽度：501像素）{
.按li{宽度：50%；}/*在中型设备（平板电脑、横向手机）上每行显示2个徽标*/
}
@介质（最大宽度：500px）{
.在小屏幕上按li{width:100%；}/*键，每行显示一个徽标*/
}

如图所示


一个

两个

三

四

感谢您修复HTML。但是，如果我添加了4个以上的徽标，会发生什么情况？我添加了5，它转到了第二行。如果您不知道将显示多少徽标，我已经用一个选项更新了我的答案-让我知道这是否对您有效？哦，另外，我注意到代码中还有一个小错误-在列表中的最后一项之后有一个额外的开口

-我在上一个代码示例中删除了它。

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

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

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