html - 如何在移动设备上堆叠李的垂直但在桌面上保持水平

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

你得试试看什么宽度会好