关闭

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

标签: css两端对齐
288人阅读 评论(0) 收藏 举报
分类:
/*方案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;
}
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6291次
    • 积分:398
    • 等级:
    • 排名:千里之外
    • 原创:34篇
    • 转载:1篇
    • 译文:1篇
    • 评论:0条
    文章分类