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

原创 2015年11月17日 22:45:46
/*方案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;
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

浮动元素的两端对齐

当我们使用float来使元素并排显示的时候,可以使用margin来控制元素之间的距离,而在很多版式里(例如产品图片的列表),需要浮动的元素达到两端对齐的效果。单纯使用float:left或者float...

在一组序列中查找两个元素的和等于给定的值(快排+两端扫描实现)

在一组序列中查找两个元素的和等于给定的值(快排+两端扫描实现) 题目描述:输入一个值Num,在一组序列中查找两个元素,若他们之和等于输入的值,则将他们挑选出来。 比如:{7,2,9,4...

文本两端对齐显示

jsp页面+CSS样式实现不同个数文字两端对齐

通常会使用加空格或者  实现占位,但是效果总是不好,兼容性也差强人意,所以研究了一下发现使用Css样式就可以实现文字两端对齐的方法: 使用letter-spacing属性来调整文字间的字符...

两端对齐的TextView

  • 2016-01-22 17:06
  • 1.60MB
  • 下载

新两端对齐的TextView

  • 2017-07-31 10:02
  • 17.68MB
  • 下载

CSS实现多行文字两端对齐的效果

CSS实现多行文字两端对齐的效果 文章来源:本站原创  浏览次数:248  发布日期:2013-09-13 在做前台界面的时候,比如一些文字的列表或者一些表单的标题,经常是2个字,3个...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)