刚研究了一下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. 【译】JavaScript 开发者年度调查报告

    截至目前有超过了 5000 人参与了(该次调查),准确的说是 5350 人.我迫不及待的想要和大家分享一下这次调查的细节.在分享之前我想要感谢参与调查的每一个人.这是 JavaScript 社区一个伟 ...

  2. 第二章IPC——IPC与开启多进程

    问题 一.IPC ①.什么是IPC  ②.为什么要有IPC 二.多进程 ①.如何开启多进程  ②.系统如何创建多进程 三.多进程引发的问题 问:私有进程(利用":+进程名")能否共 ...

  3. 快速制作规则及获取规则提取器API

    1. 引言 前面文章的测试案例都用到了集搜客Gooseeker提供的规则提取器,在网页抓取工作中,调试正则表达式或者XPath都是特别繁琐的,耗时耗力,工作枯燥,如果有一个工具可以快速生成规则,而且可 ...

  4. Java Spring MVC

    Spring MVC的实现包括 实现Controller类和基于注解的Controller RequstMapping方式 依赖: <!-- https://mvnrepository.com/ ...

  5. socket浅谈

    1什么是socket? socket的英文原义是“孔”或“插座”.作为进程通信机制,取后一种意思. 通常也称作“套接字”,用于描述IP地址和端口,是一个通信链的句柄. (其实就是两个程序通信用的.)是 ...

  6. 2014第2周三Web安全学习

    2014第2周三Web安全学习 先记录下自己关于json和xml作为数据传递媒介的差异:在写一个java方法时我将正确结果返回的对象转成json返回,将错误结果根据不同原因以xml形式返回,同事看后有 ...

  7. mvc 解决StyleBundle中 图片绝对路径 装换成相对路径的问题 CssRewriteUrlTransform

    问题 解决办法

  8. OpenCV视屏跟踪

    #include <stdio.h> #include <iostream> #include "opencv2/imgproc/imgproc.hpp" ...

  9. 最逼近Mac OS的Linux系统 -- Elementary OS

    也不知道有多少人听说过Elementary OS?elementary Project 最开始只有一个 elementary 主题,之后延伸出了很多项目,形成了 elementary Project ...

  10. jquery工具

    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxsplitter/jquery-splitter-gett ...