Question

我有一个无序列表，使用display:inline-block;保持水平，但我希望它在移动设备上显示垂直。

这是我目前对无序列表的代码：

<ul style="margin-left:auto;margin-right:auto;margin:auto;">
    <li style="display: inline-block; border: 5px solid black; padding: 10px;background-color:red;"><a style="color: white;" href="register">Register</a></li>
    <li style="display: inline-block; border: 5px solid black; padding: 10px;background-color:green;"><a style="color: white;" href="shop">Find Your Photos!</a></li>
    <li style="display: inline-block; border: 5px solid black; padding: 10px;background-color:purple;"><a style="color: white;" href="about">Meet The Team</a></li>
</ul>

所有帮助表示赞赏。

Answer 1

使用@ media-queries：

@media only screen and (max-device-width: 480px) {
          li{
             display:block;
          }
    }

你必须尝试宽度会很好

Answer 2

就我而言，内联样式不是一种好方法，但在您的情况下使用媒体查询并为其中的列表项设置display: block。

注意：您需要使用important，否则内联样式优先，您将看不到任何结果。

@media (max-width: 767px) {
  ul li {
    display: block !important;
  }
}

<ul style="margin-left:auto;margin-right:auto;margin:auto;">
  <li style="display: inline-block; border: 5px solid black; padding: 10px;background-color:red;"><a style="color: white;" href="register">Register</a></li>
  <li style="display: inline-block; border: 5px solid black; padding: 10px;background-color:green;"><a style="color: white;" href="shop">Find Your Photos!</a></li>
  <li style="display: inline-block; border: 5px solid black; padding: 10px;background-color:purple;"><a style="color: white;" href="about">Meet The Team</a></li>
</ul>

Answer 3

使用媒体查询并将li设为display：block。

@media screen and (max-width: 768px){ ul li{ display: block; margin: 20px 0;}}

注意顶部＆amp;李的底部保证金。它是分开列表。（假设768px是你想要的断点。）

Answer 4

使用媒体查询

＆＃13;

ul{
  margin-left:auto;margin-right:auto;margin:auto;
  }
ul li{
  display: inline-block; border: 5px solid black; padding: 10px;background-color:red;
  }
ul li:nth-child(2){
  background-color:green;
}
ul li:nth-child(3){
  background-color:purple;
}
ul li a{color:#fff;}

@media only screen and (max-width: 500px) {
   ul li{
     display: block;
    width: 90%;
    margin: 0 auto;
    }
}

＆＃13;

<ul>
    <li><a href="register">Register</a></li>
    <li><a href="shop">Find Your Photos!</a></li>
    <li><a href="about">Meet The Team</a></li>
</ul>

＆＃13;

如何在移动设备上堆叠li垂直但在桌面上保持水平

4 个答案: