モバイル上に垂直の垂直線を積み重ねるにはどうすればいいのですか？

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 only screen and (max-device-width: 480px) { 
      li{ 
      display:block; 
      } 
    } 

あなたは幅が良い

Answer 2

使用メディアクエリーがどうなるか試してみて、ディスプレイなどのLiをしなければなりません。

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

liの下端には、&が表示されています。リストを分離することです。 （私が望むブレークポイントは768pxと仮定します）

Answer 3

私の場合、インラインスタイルは良い方法ではありませんが、メディアクエリを使用してその中のリスト項目に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 4

使用メディアクエリ

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

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