hefeng

学习web前端和js的追赶者

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

/*方案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;
}
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010644129/article/details/49894715
文章标签: css 两端对齐
个人分类: css
上一篇url解析函数
下一篇HTML5之应用缓存
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭