那天排遇到这样一个页面，每个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. SQL server 中的@，@@、#，##分别代表什么？

    @声明变量,@@系统函数,#本地临时表,##全局临时 表    

  2. python 基础 基本数据类型

    基本类型的补充 str --> 一次性创建的,不能被修改,强制修改就会在创建一个而之前的也会在 list -->允许重复的集合 修改  记录 链表,下一个元素的位置,上一个元素的位置 tu ...

  3. MapReduce设置输出分隔符

    conf.set("mapred.textoutputformat.ignoreseparator","true"); conf.set("mapre ...

  4. choop.php一句话脚本

    <?php$_="";$_[+$_]++;$_=$_.""; $___=$_[+""];//A$____=$___;$____++;/ ...

  5. [Xcode 自带svn的使用]

    xcode自带svn的使用 1.代码中 某文件后面有 “M” 标记,表示该文件已被修改,需要commit.            (右键该文件 -> source control -> c ...

  6. Google Guava vs Apache Commons for Argument Validation

    It is an established good practice to validate method arguments at the beginning of the method body. ...

  7. .net数据库操作

    刚接触到数据库时总是被数据库中的一些基本概念,比如Connection.Command.DataReader等,给整的糊里糊涂.如今,对数据库的基本操作有了一定的认识,特此做出总结,以便后续工作中查阅 ...

  8. HDU 5908 Abelian Period(暴力+想法题）

    传送门 Description Let S be a number string, and occ(S,x) means the times that number x occurs in S. i. ...

  9. 屠蛟之路_蛟灵岛战役（上）_SixthDay

    乘风破浪,屠蛟少年们终于到达beta怪蛟大boss的老巢--蛟灵岛. 这是一座孤立在东海深处的荒岛,岛上黑烟缭绕.瘴气重重,屠蛟少年们一登岛,就感受到浓浓的腥味和妖气. 果然,再小心翼翼,走两步居然陷 ...

  10. Beta版本冲刺第一天 12.5

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 前段时间完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 对Alpha版本的分析总结,学习新技术,对Beta版本的讨论规 ...