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;
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

css3实现两端对齐

box-pack是css3的新属性,依赖于display:box(旧版弹性布局),受box-orient影响,box-pack决定了子标签水平对齐的方式,可选值有start | end | cente...

01、让一个盒子类的若然元素自动两端对齐(通过after伪类)

案例一: 两端对齐 /*css样式表的衣柜*/ *{margin:0px;padding:0px;}/*去除默认外边距、内边距*/ div{width:800...

Android TextView两端完美对齐解决方案

今天遇到一个关于TextView文字两端对齐其实方案,大家都知道原生控件是不能满足我们的需求的,因此需要自定义View 下面看下效果图package com.example.VerticalMarq...

在CSS中设置浮动元素两端对齐的2种方法分享

可以使用margin来控制元素之间的距离,而在很多版式里(例如产品图片的列表),需要浮动的元素达到两端对齐的效果,如图1所示。 图1 两端对齐的版式 单纯使用float:left或...
  • dos_186
  • dos_186
  • 2015年08月28日 10:48
  • 2513

浮动元素的两端对齐

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

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

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

文本两端对齐显示

  • 2013年03月25日 16:15
  • 5KB
  • 下载

两端对齐的TextView

  • 2016年01月22日 17:06
  • 1.6MB
  • 下载

[Android]使用webview模拟textview显示两端对齐

先来效果吧,有图有真相 在android中,使用默认TextView显示文本的时候,总会难免出现上图下部的难堪情况,这个是由于源码判断固定如此,API并未提供方法像上图上部那样显示文本,于是,代码...

新两端对齐的TextView

  • 2017年07月31日 10:02
  • 17.68MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:3种盒内元素两端对齐方案
举报原因:
原因补充:

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