那天排遇到这样一个页面，每个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. Oracle触发器实例（网搜）

    触发器使用教程和命名规范 目  录触发器使用教程和命名规范 11,触发器简介 12,触发器示例 23,触发器语法和功能 34,例一:行级触发器之一 45,例二:行级触发器之二 46,例三:INSTEA ...

  2. crontab 命令

    1. crontab 可以在shell里面设置一些定时任务 格式 30 * * * * nohup sh /data/admin/adsprecise/sources/providers.sh mjo ...

  3. 【BZOJ-1941】Hide and Seek KD-Tree

    1941: [Sdoi2010]Hide and Seek Time Limit: 16 Sec  Memory Limit: 162 MBSubmit: 830  Solved: 455[Submi ...

  4. 【BZOJ-4568】幸运数字 树链剖分 + 线性基合并

    4568: [Scoi2016]幸运数字 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 238  Solved: 113[Submit][Status ...

  5. 【BZOJ-1857】传送带 三分套三分

    1857: [Scoi2010]传送带 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 1077  Solved: 575[Submit][Status][ ...

  6. Android成长日记-ProgressBar的设计

    ProgressBar的关键属性 Android:max=”100” - ---最大显示进度 Android:progress=”50”----第一显示进度 Android:secondaryProg ...

  7. USACO 3.4 Electric Fence 皮克定理

    题意:在方格纸上画出一个三角形,求三角形里面包含的格点的数目 因为其中一条边就是X轴,一开始想的是算出两条边对应的数学函数,然后枚举x坐标值求解.但其实不用那么麻烦. 皮克定理:给定顶点坐标均是整点( ...

  8. ESPCMS /adminsoft/control/citylist.php Int SQLInjection Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link:2. 漏洞触发条件 0x1: POC htt ...

  9. js保留位和取整

    //hold是保留位,例,元,角,分 //integerType是在保留位的基础上,如果后面有值,向上向下取整 calAmount:function(hold,integerType,amount){ ...

  10. c#自适应窗体的实现

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...