如何为UL elemet设置响应式设计

How to setup responsive design for UL elemeet

本文关键字：响应 设置 elemet UL      更新时间：2023-09-26

我正在尝试使用ul元素的bootstrap进行响应式设计。

我有类似的html：

<div class="col-lg-8 col-md-7 col-sm-4 col-xs-4">
    <div class='row'>
         <ul>
             <li class='item'></li>
             <li class='item'></li>
             <li class='item'></li>
             <li class='item'></li>  
         </ul>
    </div>
</div>

CSS

.item{
    background-color:red;
}

使用大宽度，元件看起来很好

 ---   ---    ---    ---
|   | |   |  |   |  |   |
 ---   ---    ---    ---

但不是较小宽度的

 --
|  | 
 --  
 --
|  | 
 --  
 --
|  | 
 --  
 --
|  | 
 --

当我的li在较小的屏幕上时，我希望它的宽度较小，并且我希望我的li水平排列。你们能帮上忙吗？非常感谢！

ul#my_list{
  width:100%;
}
#my_list li {
   width:300px;
   transition:ease-in-out 300ms all;
   display:inline-block;
   float:left; // dont forget to use a clearfix or similar method on the #my_list element
}

@media (max-width:320){
   #my_list li{
      width:150px;
      display:block;
   }
}

这样的事情应该是你想要的，希望我能帮上忙，如果我没有解释清楚或偏离了主题，请随时告诉我！

您应该尝试使用百分比进行响应设计；看看这个例子，如果你在UL上玩宽度，那么这有点代表屏幕宽度

JSFiddle

ul {
    width: 500px; /* This could be the screen width (100%) */
    height: 50px;
    border: 2px solid #000;
    margin: 0;
    padding: 0;
}
.item{
    background-color:red;
    margin: 0 1%;
    width: 23%; /* less width to compensate for margin */ 
    height: 100%;
    float: left;
    list-style-type: none;
}
相关文章：