那天排遇到这样一个页面，每个logo紧挨着，而且两端对齐。尼玛，没招啊~

今天终于找到了解决办法：

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <style>

         ul { margin: 0px; padding: 0px; text-align: justify; font-size: 0px; /*hide whitespace between elements*/ width: 510px; }

             ul li { display: inline-block; width: 100px; height: 100px; border: 1px solid red; }

             ul:after { content: ''; display: inline-block; width: 100%; height: 0; }

     </style>

 </head>

 <body>

     <ul id="Grid">

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

         <li>5</li>

         <li>6</li>

         <li>7</li>

         <li>8</li>

         <li>9</li>

         <li>10</li>

     </ul>

 </body>

 </html>

主要有两个点：

1.不用浮动，用inline-block，但是使用inline-block，元素之间有间隔，用font-size:0px处理

2.两端对齐：使用text-align:justify。在其自然状态下，"text-align:justify"就不能工作，除非内容足够长并引起一个换行符。样式的最后一行解决该问题。

原文链接：http://www.w3cplus.com/css/text-align-justify-and-rwd.html

感谢大漠

前端排版-使用inline-block且两端对齐的更多相关文章

  1. css 表单标签两端对齐

    来自:http://demo.doyoe.com/css3/justify/justify-form.htm  侵删 <!DOCTYPE html> <html lang=" ...

  2. CSS实现两端对齐效果

    CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...

  3. 自适应的两端对齐：text-align:justify

    <!DOCTYPE HTML> <html> <head> <title>文本两端对齐 by hongchenok</title> < ...

  4. 完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐

    text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了. justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline ...

  5. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  6. 一行两端对齐justify-content

    一.之前不了解css3的属性,更没听过flex布局 在处理表单前面的文字,两端对齐,按照我之前的前端人员,加空格处理,但是在不浏览器解析空格的宽是不一样的 上图就用空格,在不同浏览器显示的效果,有时候 ...

  7. Bootstrap两端对齐的导航实例

    Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  8. css实现两端对齐~

    今天做表单时遇到让上下两个字段对齐的情况,手机号码.用户名. 然后今天在网上找了找相关方法,发现确实是没有什么好的方法解决,特别是当需要兼容的时候.找到了两个我觉得相对还不错的方法: 方法一.是在司徒 ...

  9. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

随机推荐

  1. Leetcode #2 Add two number

    Q: You are given two linked lists representing two non-negative numbers. The digits are stored in re ...

  2. 【BZOJ-2229】最小割 最小割树（最大流+分治）

    2229: [Zjoi2011]最小割 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1565  Solved: 560[Submit][Status ...

  3. BZOJ1024 [SCOI2009]生日快乐

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  4. SSD硬盘的4K对齐

    4K对应4096 硬盘模式: 一.让SSD运行在AHCI模式下: AHCI,全称Advanced Host Controller Interface,即高级主机控制器接口,相比老旧的“IDE“ 虚拟模 ...

  5. hdu5183 hash大法

    维护前缀和sum[i]=a[0]-a[1]+a[2]-a[3]+…+(-1)^i*a[i]枚举结尾i,然后在hash表中查询是否存在sum[i]-K的值.如果当前i为奇数,则将sum[i]插入到has ...

  6. poj2284 欧拉公式

    题意:给出一图形,求该图形把平面分成了几部分 欧拉公式: http://blog.csdn.net/wangxiaojun911/article/details/4586550 对于二维平面上的情况. ...

  7. struts2 CVE-2013-4316 S2-019 Dynamic method executions Vul

    catalog . Description . Effected Scope . Exploit Analysis . Principle Of Vulnerability . Patch Fix 1 ...

  8. 数据结构算法C语言实现（二）---2.3线性表的链式表示和实现之单链表

    一.简述 [暂无] 二.头文件 #ifndef _2_3_part1_H_ #define _2_3_part1_H_ //2_3_part1.h /** author:zhaoyu email:zh ...

  9. RabbitMQ Queue分发多个Consumer

    多个Consumer的消息分发 之前讲过一个queue对应一个consumer的小例子, 但是在实际项目中,一个consumer肯定是不够的,queue中的消息过多.一个consumer明显会处理过慢 ...

  10. HDU 5816 Hearthstone

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem Descript ...