刚研究了一下inline-block布局方式

inline-block布局方式是一种比float浮动更优的一种布局方式。

一个超简单的demo

html:

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>inline-block布局</title>

 </head>

 <body>

 <ul class="inline-block">

     <li class="inline-block-in"><a href="#">首页</a></li>

     <li class="inline-block-in"><a href="#">详情介绍</a></li>

     <li class="inline-block-in"><a href="#">帮助中心</a></li>

     <li class="inline-block-in"><a href="#">联系我们</a></li>

     <li class="inline-block-in"><a href="#">关于我们</a></li>

 </ul>

 </body>

 </html>

css:

 <style>

     ul li {

         list-style: none;

         font-size: 12px;

         letter-spacing: normal;

         padding: 0 10px;

     }

     .inline-block {

         font-size: 0px;//inline-block 布局核心代码

         letter-spacing: -8px;////inline-block 布局辅助代码,兼容safari 浏览器

     }

     .inline-block-in {

         display: inline-block;//inline-block 布局核心代码

         vertical-align: top;//inline-block 布局辅助代码

     }

     .inline-block-in {

         *display: inline;//inline-block 布局辅助代码,兼容IE6~7

     }

 </style>

注意：两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失。

具体应用稍后展示

inline-block布局方式的更多相关文章

  1. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  2. CSS原生布局方式

    前言 网页原生布局的方法其实网上有很多,大概为Flow(流动布局模型).Float(浮动布局模型).Layer(层级布局模型).<!--more--> Flow布局 流动布局模型其实就是默 ...

  3. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  4. HTML5+CSS3常见布局方式

    1.等高布局 1.1 代码 等高布局是指子元素在父元素中高度相等的布局方式 <div class="father"> <div class="f1&qu ...

  5. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  6. Android入门（十）：界面的布局方式及其实际应用

    关于Android界面布局,网上已经有了很多非常不错的学习资料,在这里我也不班门弄斧了,推荐两篇我认为写的不错的教程,然后再重点讲一下几种布局方式的实际应用. 教程链接:①http://www.cnb ...

  7. 【Android UI】Android开发之View的几种布局方式及实践

    引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...

  8. 对比MFC资源文件谈谈WPF布局方式

    对比MFC资源文件谈谈WPF布局方式 MFC方式 对于传统的MFC基于UI的应用程序设计通常分两步走,首先是设计UI,使用的是RC文件,然后是代码文件,对RC文件进行操作,如下面Figure 1 的基 ...

  9. Android 开发之旅：view的几种布局方式及实践

    本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...

随机推荐

  1. python快速搭建WebServer

    #!/usr/bin/python import SimpleHTTPServer import SocketServer import os PORT = 7777 WEBDIR = "/ ...

  2. 利用radio实现纯css选项卡切换

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAABCCAIAAAD18aaXAAAG70lEQVR4nO3dO5KrPBCGYRY0VV4OEX

  3. Python学习(五) Python数据类型：列表（重要）

    列表: list是一组有序项目的数据结构. 列表是可变类型的数据,列表用[]进行表示,包含了多个以","分隔的项目. list=[] type(list) //<type ' ...

  4. What is an http upgrade?

    HTTP Upgrade is used to indicate a preference or requirement to switch to a different version of HTT ...

  5. 3D Touch：静态快速启动方式

    原文传送门:Add iOS 9’s Quick Actions shortcut support in 15 minutes right now !   苹果在iOS9 上引入3D触控(压力触控)功能 ...

  6. Qt编程可不可以结合其他的第三方库和本土API？（有zeroMQ的Qt封装，还可轻易使用Python的库）

    作者:渡世白玉链接:http://www.zhihu.com/question/29030777/answer/59378712来源:知乎著作权归作者所有,转载请联系作者获得授权. 可以,十分可以,你 ...

  7. C# 将字节流转换为图片的实例方法

    usingSystem;  usingSystem.Collections.Generic;  usingSystem.Linq;  usingSystem.Text;  usingSystem.Dr ...

  8. python模块学习之random

    模块源码: Source code: Lib/random.py 文档:http://docs.python.org/2/library/random.html 常用方法: random.random ...

  9. 转（havel 算法）

    http://www.cnblogs.com/wally/p/3281361.html poj 1659(havel算法) 题目链接:http://poj.org/problem?id=1659 思路 ...

  10. (step6.1.3)hdu 1875(畅通工程再续——最小生成树)

    题目大意:本题是中文题,可以直接在OJ上看 解题思路:最小生成树 1)本题的关键在于把二维的点转化成一维的点 for (i = 0; i < n; ++i) { scanf("%d%d ...