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

最新推荐文章于 2021-09-10 08:31:08 发布

鹿鹿鹿啦

最新推荐文章于 2021-09-10 08:31:08 发布

阅读量3.9k

点赞数 1

本文链接：https://blog.csdn.net/l354002675/article/details/78056047

版权

一，使用 -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;
}