刚研究了一下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. Get Start StrangeIOC for Unity3D

    好久没有发blog了,因为只发原创内容,而去年发布的那几篇后来发现随便百度到处都是转载的或者各种网站自动扒的,我觉得既然大家都不尊重这种东西就没必要发上来了!不过由于工作原因最近在看Unity的一个I ...

  2. PK投票效果

    /** *createTime:2015-07-21 *updateTime:2015-06-22 *author:刘俊 *Description:PK投票 *phone:13469119119 ** ...

  3. 居然因为交换错了好几把。。。。，还有坑点是num1可以大于num2

    完数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...

  4. position属性absolute与relative(转)

    每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以后多看看. Absolute,CSS中的写法是:position:absolute; 他的意思是绝对 ...

  5. centos 6.5 安装 nginx+php+mysql

    一.准备工作 (1)配置防火墙 1.首先检查iptables服务的状态 [root@woxplife ~]# service iptables status iptables: Firewall is ...

  6. mysql select不使用任何锁（select with nolock）

    在ms sql中可以通过with(nolock)选项指定查询不锁表,在mysql中没有这个选项,需要通过set语句来设置不锁表: SET TRANSACTION ISOLATION LEVEL REA ...

  7. Clone使用方法详解【转载】

    博客引用地址:Clone使用方法详解 Clone使用方法详解   java“指针”       Java语言的一个优点就是取消了指针的概念,但也导致了许多程序员在编程中常常忽略了对象与引用的区别,本文 ...

  8. 04747_Java语言程序设计（一）_第2章_运算和语句

    推荐使用f2 public class Aserver { public static void main(String args[]) { float f1 = (float) 12.345; fl ...

  9. C语言结构体的内存对齐问题

    在C语言开发当中会遇到这样的情况: #include <stdio.h> struct test { int a; char b; }; int main(int argc, const ...

  10. Unity 接MM横屏闪退的原因

    =.=研究了1天接SDK到处都在报错,于是使用logcat查看原因截取到这样的Exception. call to OpenGL ES API withno current context(logge ...