3种盒内元素两端对齐方案

最新推荐文章于 2025-03-03 12:04:44 发布

追赶者

最新推荐文章于 2025-03-03 12:04:44 发布

阅读量1k

点赞数

分类专栏： css 文章标签： css 两端对齐

本文链接：https://blog.youkuaiyun.com/u010644129/article/details/49894715

版权

css 专栏收录该内容

2 篇文章

订阅专栏

/*方案1*/
ul {
  list-style: none;
  padding-left: 0;
    width:490px;
  overflow:hidden;
  background-color: #eee;
}
li {
  float:left;
    width:100px;
  height:50px;
  margin-left:30px;
  margin-bottom:10px;
  background-color: #fff;
}
ul li:nth-child(4n+1) {
    margin-left:0;
}

/*方案2*/
ul {
  list-style: none;
  width:490px;
  -webkit-column-count:4;
  -webkit-column-gap:30px;
  padding-left:0;
  background-color: #eee;
  font-size:0;
}
li {
  display: inline-block;
    width:100px;
  height:50px;
  margin-bottom: 10px;
  background-color: #fff;
}
/*方案3*/
ul {
  list-style: none;
  width:490px;
  font-size: 0;
  padding-left: 0;
  text-align: justify; 
  text-justify:distribute-all-lines;  /*兼容IE*/
  background-color: #eee;
}
ul:after{
  content:" ";
  width: 100%;
  display: inline-block;
  overflow: hidden;
}
li {
  display: inline-block; 
  width: 100px;
  height:50px;
  margin-top:10px;
  background-color: #fff;
}