那天排遇到这样一个页面，每个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. JavaScript RegExp 对象(来自w3school)

    RegExp 对象用于规定在文本中检索的内容. 什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp 就是这种模式. 简单的 ...

  2. HDFS源码分析：NameNode相关的数据结构

    本文主要基于Hadoop1.1.2分析HDFS中的关键数据结构. 1 NameNode 首先从NameNode开始.NameNode的主要数据结构如下: NameNode管理着两张很重要的表: 1)  ...

  3. Linux/Windows下如何退出telnet

    [Ctrl+]]->[quit] linux下和windows上一样

  4. Android成长日记-WebView使用

    在App中有时候会看到一些页面是以网页的形式展示,其原理就是运用了WebView,下面予以讲述WebView 1. 使用Intent调用系统浏览器或者第三方浏览器打开网页 调用系统浏览器打开页面 Ur ...

  5. CentOS同步时间

    用date查看系统当前时间,date -R 可查看时区. CentOS 同步时间由ntp服务提供,可以用"yum install ntp -y"安装. 装完后运行命令 ntpdat ...

  6. PowerDesigner 学习笔记

    软件:PowerDesginer16.5 首先说一下对应的模型 New Model  --->  Model Type 作为一个英语渣,实在是压力颇大,然而汉化经常会导致无故的BUG,所以简单翻 ...

  7. UVa 437 The Tower of Babylon（经典动态规划）

    传送门 Description Perhaps you have heard of the legend of the Tower of Babylon. Nowadays many details ...

  8. 如何在Visual Studio 2013中使用Ribbon For WPF

    1.首先需要 下载Ribbon For WPF.目前最新的版本是Microsoft Ribbon for WPF October 2010. 下载 链接: https://www.microsoft. ...

  9. 数据结构与算法分析 - 最短路（Dijkstra+floyd_Warshall+bellman_ford）

    先附上Djikstra的代码:普通版 const int maxn=101; const int INF=0x3f3f3f3f; int edges[maxn][maxn]; int dist[max ...

  10. KEGG and Gene Ontology Mapping in Bioinformatic Method

    使用KOBAS进行KEGG pathway和Gene Ontology分析 Article from Blog of Alfred-Feng http://blog.sina.com.cn/u/170 ...