Question

我有一个用ul制作的菜单，我将其设为水平。每个li顶部都有一个图标，底部有一个文字。

＆＃13;

    .menu{
      width:800px; margin:0 auto;
    }
    .menu li{
      display: inline;
      list-style: none;
      float: left;
      margin-right: 1.9em;
      padding: 0;
      text-align:center;
    }
    .menu .fa {
      display: block;
      margin-bottom: 2px;
    }
    .selected {
      color: red;
    }
    .menu li:hover{
      color: red;
    }

＆＃13;

<ul class="menu">
    <li><i class="fa fa-info-circle fa-5x selected" aria-hidden="true"></i><span>Venue Information</span></li>
    <li><i class="fa fa-camera-retro fa-5x" aria-hidden="true"></i><span>Media</span></li>
    <li><i class="fa fa-link fa-5x" aria-hidden="true"></i><span>Social Links</span></li>
    <li><i class="fa fa-tags fa-5x" aria-hidden="true"></i><span>Tags</span></li>
    <li><i class="fa fa-music fa-5x" aria-hidden="true"></i><span>Events</span></li>
    <li><i class="fa fa-glass fa-5x" aria-hidden="true"></i><span>Bottle Service</span></li>
    <li><i class="fa fa-cutlery fa-5x" aria-hidden="true"></i><span>Menus</span></li>
</ul>

＆＃13;

在笔记本电脑上看起来很像这张照片

但在手机上

如何在移动电话上将此菜单转换为垂直菜单，以便它能够快速响应？

注意：我知道如何使用媒体查询，我的问题是如何将菜单代码转换为垂直

Answer 1

您必须开始使用媒体查询。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

.menu li{
  display: block;
}

@media (min-width:768px){

    .menu li{
      display: inline;
    }

}

Answer 2

您可以通过@media查询应用相同的样式：

请注意，您必须调整一些值以优化移动设备中的视图，例如.menu＆＃39; s width低于414px或者@media断点是什么这样内容就不会溢出。
您可能还想在查询中将.fa-5x设置为display: none;，并考虑移动视口使用较小的尺寸。

这只是一个通用的例子：

@media (max-width: 414px) {
    .menu {
        width: 414px;
        margin: 0 auto;
    }
    .menu li {
        display: inline;
        list-style: none;
        float: left;
        margin-right: 1.9em;
        padding: 0;
        text-align: center;
    }
    .menu .fa {
        display: block;
        margin-bottom: 2px;
    }
    .selected {
        color: red;
    }
    .menu li:hover {
        color: red;
    }
}

Answer 3

尝试将此添加到CSS代码的末尾：

@media only screen and (max-width : 768px) {
  .menu li{
    display: block;
  }
}

并在小屏幕（手机）上进行测试。这绝不是一个完整的答案，而是CSS中媒体查询的快速演示。所以请务必阅读它们（我最喜欢的媒体查询教程之一在W3Schools上，请查看。

祝你好运。

如何在CSS手机上将水平ul转换为垂直？

3 个答案: