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

Question

提问by Goose

We have a "As Seen On" press column on desktop near the footer. On desktop it works properly and the logos are all centered on one line. However, it does the same for mobile and on mobile I need the logos to be stacked instead of all one one line so you don't scroll all the way to the right on your phone or tablet.

我们在桌面页脚附近有一个“As Seen On”新闻栏。在桌面上它工作正常，标志都集中在一行上。但是，它对移动设备和移动设备的作用相同，我需要堆叠徽标而不是一行一行，这样您就不会在手机或平板电脑上一直向右滚动。

I'm not 100% sure but I think I need a media query but I am kinda new to formatting CSS.

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

HTML:

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:

CSS：

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

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

Thanks

谢谢

Answer 1

回答by Andi North

What you're looking for can be easily achieved with a few lines of CSS. You can view the CSS I've created (and documented) in this JSFiddle: https://jsfiddle.net/8oLxr7ke/

使用几行 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>

In essence, what my code does is:

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

Set up a rudimentary grid system
Show four logos on large screens
Show two logos on medium screens
Show only one logo on small screens

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

If you don't want to be restricted to showing a set number of logos, you could do the following:

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

View on JSFiddle https://jsfiddle.net/5m0whf3k/

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

Important note:

重要的提示：

In your HTML code there were closing </a>tags after the <img>tags but no opening <a>tags - this is invalid code. In my example I have removed those for you.

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

Also, you shouldn't need the <br>between the <h2>and the <ul class="press">as the press list will be full width and on its own rowthanks to the display: block;.

此外，你应该不需要<br>之间<h2>和<ul class="press">为记者名单将在全宽和自己的上排感谢display: block;。

Answer 2

回答by Talitu

Try adjusting your viewport, if the problem persists, then opt in for media queries

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

Answer 3

回答by E.moloudi

 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>

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

提问by Goose

回答by Andi North

回答by Talitu

回答by E.moloudi

相关推荐

最近更新

标签

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

提问by Goose

回答by Andi North

回答by Talitu

回答by E.moloudi

相关推荐

Html 如何在css / html中以不同颜色打印每个字母

Html 设置电子邮件和浏览器的 tr 和 td 宽度和高度

Html 显示带有 iframe 页面全宽的 YouTube 视频

Html 垂直对齐两个 Div

相关推荐

最近更新

标签