刚研究了一下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. Java的反射机制及应用实例

    一:什么是反射机制 简单的来说,反射机制指的是程序在运行时能够获取自身的信息.在Java中,只要给定类的名字,那么就可以通过反射机制来获得类的所有信息. 二:哪里用到反射机制 我们用过一些知识,但是并 ...

  2. Linux下安装MySQL步骤

    1.下载安装包(这里是32位的): MySQL-client-5.6.13-1.rhel5.i386.rpm MySQL-server-5.6.13-1.rhel5.i386.rpm 2.安装 rpm ...

  3. 在shell脚本中调用sqlplus

    #!/bin/bash sqlplus dc_file_data_js/dc_file_data_js << EOF1 set linesize 500; set pagesize 100 ...

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

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAABCCAIAAAD18aaXAAAG70lEQVR4nO3dO5KrPBCGYRY0VV4OEX

  5. HDU 4939 Stupid Tower Defense

    dp:枚举red,dp前i 个塔中有j 个蓝塔的最大伤害. 机智的地方:dp前i 个塔的时候可以同时处理n-i 个红塔,这样就少了个循环...(枚举红塔的循环) #include <iostre ...

  6. MVC 中使用uploadify上传图片遇到的蛋疼问题

    MVC 中使用uploadify上传图片遇到的蛋疼问题 初次使用uploadify上传图片,遇到了一些比较纠结的问题,在这里和大家分享下,有不对的地方还望大神多多指教,希望对刚接触的朋友有所帮助,文采 ...

  7. inotifywait实现目录监控

    http://blog.csdn.net/firefoxbug/article/details/8188804

  8. javascript之数组

    一.定义数组. 定义数组有两个方法: 1.var arr1 = []; //定义一个空数组 2.var arr2 = [1,2,3,"str1","str2"] ...

  9. css案例学习之按钮超链接

    效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ ...

  10. code 代码分析 及其解决方案

    官网地址:http://msdn.microsoft.com/zh-cn/library/ms182135.aspx [FxCop.设计规则]11. 不应该使用默认参数 参考地址:http://blo ...