一个使用 text-align: justify; 使元素均匀分布的小例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>justify</title>
  6.     <style>
  7.     ul,dl {
  8.         margin: 100px auto;
  9.         border: 3px solid #999;
  10.         width: 80%;
  11.         padding: 0;
  12.         list-style: none;
  13.         line-height: 1;
  14.         font-size: 0;
  15.     }
  16.     li {
  17.         display: inline-block;
  18.         width: 20%;
  19.         text-align: center;
  20.     }
  21.     span,dd {
  22.         display: inline-block;
  23.         width: 80px;
  24.         line-height: 80px;
  25.         text-align: center;
  26.         background: #123;
  27.         color: #fff;
  28.         font-size: 28px;
  29.     }
  30.     dl {
  31.         height: 80px;
  32.         text-align: justify;
  33.         overflow: hidden;
  34.     }
  35.     dl:after {
  36.         content: "_";
  37.         font-size: 5000px;
  38.         /*用来制造换行效果*/
  39.     }
  40.     dd {
  41.         margin: 0;
  42.         margin-right: -1px;
  43.     }
  44.     </style>
  45. </head>
  46. <body>
  47.     <ul>
  48.         <li><span>1</span></li>
  49.         <li><span>2</span></li>
  50.         <li><span>3</span></li>
  51.         <li><span>4</span></li>
  52.         <li><span>5</span></li>
  53.     </ul>
  54.     <dl>
  55.         <dd>1</dd>
  56.         <dd>2</dd>
  57.         <dd>3</dd>
  58.         <dd>4</dd>
  59.         <dd>5</dd>
  60.         <dd>6</dd>
  61.     </dl>
  62. </body>
  63. </html>

效果如图：

上面一列是固定个数，下面可以是任意个数。

关键是使用 :after 来制造换行效果。

text-align:justify小例子的更多相关文章

  1. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  2. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  3. c# BackGroundWorker 多线程操作的小例子

    在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

  4. ASP.NET Cookie对象到底是毛啊？（简单小例子）

    记得刚接触asp.net的时候,就被几个概念搞的头痛不已,比如Request,Response,Session和Cookie.然后还各种在搜索引擎搜,各种问同事的,但是结果就是自己还是很懵的节奏. 那 ...

  5. c#几个小例子引发的思考

    楚广明老师的c#教程每一节都会给出几个小例子让大家联系,对于初学者来说这确实是一件很纠结的事情,下面我把这几个小例子简单的写一下.同时看一下我们学到了什么 1.面向过程版的圆周长面积计算 using ...

  6. Ajax入门小例子

    大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html                               ---Ajax基础学习 http:/ ...

  7. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  8. 我的Android进阶之旅------>Android拍照小例子

    今天简单的学习了一下android拍照的简单实现. 当然该程序是个小例子,非常简单,没有什么复杂的操作,但是可以学习到Android 拍照API流程. 1.在布局文件中添加一个 surfaceView ...

  9. C# 关于委托的小例子

    本例子是一个关于委托的小例子[猫叫,狗跳,人喊]. 委托是C#开发中一个非常重要的概念,理解起来也和常规的方法不同,但一旦理解清楚,就可以信手拈来,随处可用. 委托是对方法的抽象.它存储的就是一系列具 ...

随机推荐

  1. salt-grains

    自定义grains 的方法 1: 在minion 的配置文件夹 /etc/salt/minion.d  下面包含的配置文件  grains.conf 2: 在salt的安装目录中建立grains 文件 ...

  2. 使用jsoup解析html页面内容案例

    public String getFaGuiKuTitles(String type, int page) { String href = "http://info.qd-n-tax.gov ...

  3. Android 用户登录

    1:服务端代码如下 <?php /** *登录成功就返回 1,否则返回 0 */ $REQUEST_METHOD=$_SERVER['REQUEST_METHOD']; if($REQUEST_ ...

  4. C++ 智能指针auto_ptr

    template<class T> class auto_ptr { public: ); // Item M5 有“explicitfor”// 的描述 template<clas ...

  5. Linux下静态编译Qt

    Qt采用编译的方式安装的时候,配置中默认的编译方式是动态编译的,但是有时候你编写的程序要发布出去,带很多动态库文件是很繁琐的,此时就需要静态编译你的程序,Qt要实现静态编译必须库文件也是静态编译的,所 ...

  6. PowerShell 转码函数 Default->UTF8

    $chs='你好' function converToUft8($str){ $bs=[System.Text.Encoding]::Default.GetBytes($str); $u8Char=[ ...

  7. Linux永久挂载远程网络目录

    一般我们不永久挂载可以这样: mount -t cifs -o user=administrator,password=Fjqx2012,codepage=cp936,iocharset=cp936 ...

  8. ActionBar兼容性的实现方式的要点

    1.对于APILevel <11 的版本兼容ActionBar <1> Activity 继承ActionBarActivity <2> 获取ActionBar的方法:g ...

  9. 五大P2P平台费用一览

    我看版上谈P2P的挺多的,正好我也投了点P2P, 今天看到一个不错的图 欢迎版上朋友讨论       -- 不忧不惧

  10. AsyncTask和Handler的优缺点比较

    AsyncTask实现的原理和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以通过接口 ...