制作列表元素（ul / li）移动友好/响应HTML / CSS

Question

我们有一个＆＃34; As Seen On＆＃34;在页脚附近的桌面上按下列。在桌面上它可以正常工作，徽标都集中在一行上。但是，它对移动设备和移动设备都是一样的我需要堆叠徽标而不是所有一行，这样您就不会在手机或平板电脑上向右滚动。

我不是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;。

Answer 2

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

Answer 3

 function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
        document.getElementById("header1").classList.toggle("relative");
        document.getElementById("button_icon").classList.toggle("change_icon");
    }

.wrap{
    min-height: calc( 100vh - 86px );
}

a{
    text-decoration: none;
    color: #666666;
}

header{
    text-align: center;
}

header div ul{
}

#first_h1{
    color: #000000;
    float: left;
    margin: 10px 0;
}

#slider{
    text-align: center;
    border: 1px solid #34c489;
    background: linear-gradient(to top, #34c489, rgba(52, 196, 137, 0.30), rgba(52, 196, 137, 0)), url("../img/england_landscape_2-wallpaper-2880x1620.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

.boxing{
    max-width: 70%;
    margin: 0 auto;
}

#img_of_slider{
    padding: 0;
    margin: 0;
    width: 100px;
    padding-top: 20px;
}

div header div ul li{
    font-size: 1em;
}

/*==================*/
.dropbtn {
    color: white;
    padding: 16px;
    border: none;
    height: 56px;
    width: 56px;
    background-position: center;
    background-size: 60%;
    background-color: black;
    background-repeat: no-repeat;
}

.dropdown {
    display: inline-block;
    float: right;
}

.dropdown-content {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 1.5em;

}

.dropdown-content li{
    padding: 5px 0;
}

.dropdown-content li a{
    color: #fff;
}

.dropdown-content li:hover{
    background-color: rgba(64, 247, 171, 0.36);
}

.show {
    display: inline;
    width: 100%;
    position: absolute;
    left: 0;
    top: 56px;
    background-color: #34c489;
}

.relative{
    position: relative;
}

.change_icon{
    background-position: center;
    background-size: 60%;
    background-color: green;
    background-repeat: no-repeat;
}

@media screen and (min-width: 680px) {

    #first_h1{
        float: left;
        padding-left: 40px;
        color: #000000;
        margin: 10px 0;
    }

    .dropdown-content li{
        display: inline-block;
        padding-right: 20px;
        font-size: 1em;
        margin: 10px 0;
    }

    .dropdown-content li a{
        color: #000000;
    }

    .float{
        float: left;
        width: 28%;
        padding: 2%;
    }

    .clear_fix::after{
        content: "";
        display: table;
        clear: both;
    }

    #img_of_slider{
        width: 250px;
    }

    .dropbtn{
        display: none;
    }

    .dropdown-content{
        display: block;
        float: right;
        padding-right: 50px;
        margin: 0;
    }

    .dropdown-content li:hover{
        background-color: transparent;
    }
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/normaliz.css"/>
    <link rel="stylesheet" href="css/about.css"/>
    <title>Best city guide | Baneh</title>
</head>
<body>
<div class="wrap">
    <header id="header1">
        <div class="clear_fix boxing">
            <a href="#"><h1 id="first_h1">city</h1></a>
            <div class="dropdown">
                <button onclick="myFunction()" id="button_icon" class="dropbtn"></button>
                <ul id="myDropdown" class="dropdown-content">
                    <li><a href="index.html">home</a></li>
                    <li class="active"><a href="about.html">about</a></li>
                    <li><a href="news.html">news</a></li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
            </div>
        </div>
        <div style="clear: both"></div>
        <div id="slider">
            <img id="img_of_slider" src="img/manager.png" alt="city icon"/>
            <h1>Best City Guide</h1>
            <h3>city</h3>
        </div>
    </header>
</div>
</body>
</html>