刚研究了一下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. 10 个十分难得的 javascript 开发经验

    Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站. 尽管很多的开发人员都乐于颂扬 javascript,但是仍旧有人看到它的阴暗面. ...

  2. Python爬虫学习：二、爬虫的初步尝试

    我使用的编辑器是IDLE,版本为Python2.7.11,Windows平台. 本文是博主原创随笔,转载时请注明出处Maple2cat|Python爬虫学习:二.爬虫的初步尝试 1.尝试抓取指定网页 ...

  3. Python 之socket的应用

    本节主要讲解socket编程的有关知识点,顺便也会讲解一些其它的关联性知识: 一.概述(socket.socketserver): python对于socket编程,提供了两个模块,分别是socket ...

  4. onclick事件

    onclick = "func(this);"----------->传递element对象 onclick = "func(event);"------ ...

  5. C语言中指针的指针是如何工作的？

      我们有时看到这样地饿代码: int *ptr = &x; 这里,ptr是一个指向x在内存中的地址的指针. 假设有另外一条语句是这样地的: int **ptr2 = &ptr; 我们 ...

  6. LeeCode-Linked List Cycle

    Given a linked list, determine if it has a cycle in it. /** * Definition for singly-linked list. * s ...

  7. Linux 文件

    Linux系统中:.a文件是静态链接库文件.所谓静态链接是指把要调用的函数或者过程链接到可执行文件中,成为可执行文件的一部分.当多个程序都调用相同函数时,内存中就会存在这个函数的多个拷贝,这样就浪费了 ...

  8. 用到的Python运算符

    假设变量a为10,变量b为20. 算术运算符  比较运算符 赋值运算符 逻辑运算符 运算符优先级 对于逻辑运算符,not的优先级最大,or的优先级最小.它们三个的优先级排序为:not > and ...

  9. Unity 编辑器扩展自定义窗体

    这次看见Unity还可以自定义弹出窗体,让我很好奇.于是就去网上找文章看了看. 如果想自定义窗体需要把类放入Editor文件夹下面. 代码如下: using UnityEngine; using Un ...

  10. nsinteger 与 int 区别

    在苹果的api实现中,NSInteger是一个封装,它会识别当前操作系统的位数,自动返回最大的类型.   当你不知道你的操作系统是什么类型的时候,你通常会想要使用NSInteger,所以或许你想要你的 ...