实现列表两端对齐的两种方法_li两端对齐

作者：2023面试高手 | 2024-03-23 14:34:54

踩

li两端对齐

一，使用 -margin

<div class="container">
           <ul class="list">
               <li>我是一个列表</li>
               <li>我是一个列表</li>
               <li>我是一个列表</li>
               <li>我是一个列表</li>
               <li>我是一个列表</li>
               <li>我是一个列表</li>
               <li>我是一个列表</li>
               <li>我是一个列表</li>
               <li>我是一个列表</li>
               <li>我是一个列表</li>
           </ul>
       </div>

*{
   margin: 0;
   padding: 0;
}
.container{
   margin: 0 auto;
   width: 500px;
   border: 1px solid red;
   margin-bottom: 20px;
}
.list{
   overflow: hidden; 
   margin-right: -10px;
}
.list li{
   list-style: none;
   width: 92px;
   height: 92px;
   background-color: #0000FF;
   margin-bottom: 20px;
   float: left;
   margin-right:10px ;
}

二.text-align: justify

<div class="container">
           <ul class="list">
               <li class="visible-li">我是一个列表</li>
               <li class="visible-li">我是一个列表</li>
               <li class="visible-li">我是一个列表</li>
               <li class="visible-li">我是一个列表</li>
               <li class="visible-li">我是一个列表</li>
               <li class="visible-li">我是一个列表</li>
               <li class="visible-li">我是一个列表</li>
               <li class="visible-li">我是一个列表</li>
               <li class="visible-li">我是一个列表</li>
               <li class="visible-li">我是一个列表</li>
               <li class="hidden-li">我是一个列表</li>
               <li class="hidden-li">我是一个列表</li>

</ul>
</div>

*{
   margin: 0;
   padding: 0;
}
.container{
   margin: 0 auto;
   width: 500px;
   border: 1px solid red;
   margin-bottom: 20px;
}
.list{
   text-align: justify;
}
.list li{
   display: inline-block;
   list-style: none;
}
.list .visible-li{
   width: 92px;
   height: 92px;
   background-color: #0000FF;
   margin-bottom: 20px;
}
.list .hidden-li{
   height: 0;
   opacity: 0;
   visibility: hidden;
   height: 0;
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/295780?site