如何堆積李的垂直移動，但在桌面上保持水平

我有一個無序的列表，它使用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>

所有幫助表示讚賞。

來源

2016-08-24 user3535901

使用@媒體查詢：

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

你必須嘗試什麼樣的寬度將是很好的

來源

2016-08-24 07:34:42

使用媒體查詢，使李鴻章爲顯示：塊。

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

請注意頂部& li的底部邊距。它是分開列表。（假設768px是你想要的斷點）

來源

2016-08-24 07:35:02 Neeraj

至於我，內聯樣式不是一個好方法，但在你的情況下使用媒體查詢併爲其中的列表項設置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>

來源

2016-08-24 07:35:19

你並不需要使用內聯樣式或'important'這一點。 – 1j01

使用媒體查詢

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>

來源

2016-08-24 07:37:59

如何堆積李的垂直移動，但在桌面上保持水平

回答

相關問題