<div class="pag">
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#" class="choose">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">下一页</a>
<a href="#">最后</a>
</div>

展示效果:

这是一段分页的html,关于他的样式我写了两种方式。

1.display:inline-block

 .pag a{
display: inline-block;
border: 1px #ddd solid;
padding: 6px 13px;
background: #fff;
font-size: 16px;
color: #333333;
text-decoration: none;
}
.paging .pag .choose{
background: #00a1f6;
color: #fff;
}

展示效果:

2.float:left

 .pag a{
float: left;
border: 1px #ddd solid;
padding: 6px 13px;
background: #fff;
font-size: 16px;
color: #333333;
text-decoration: none;
}
.pag .choose{
background: #00a1f6;
color: #fff;
}

展示效果:

关于display:inline-block和float:left的区别的更多相关文章

  1. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. float:left 与display:inline的具体区别?

    设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素.但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:le ...

  4. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  5. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  6. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  7. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  8. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  9. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  10. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

随机推荐

  1. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

  2. jquery常用插件及用法总结

    http://www.jb51.net/Special/200.htm

  3. sql 语句纵表变横表

    现把转换方法列举如下: 1.纵表转横表: 纵表结构 TableA Name Course Grade 张三 语文 75 张三 数学 80 张三 英语 90 李四 语文 95 李四 数学 55 横表结构 ...

  4. windows10 下访问 virtualbox 虚拟机的linux15.10/16.04 系统 及 用 putty 访问虚拟机的配置

    参考: http://www.doc88.com/p-915707596190.html --- 安装samba http://my.oschina.net/u/2260265/blog/405598 ...

  5. 菜鸟学Android编程——简单计算器《一》

    菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

  6. 学习日志 - Openwrt安装python然后wallproxy

    前提: - 先要把U盘插入路由器的usb口,大多数情况Openwrt都会自动挂载的吧,尽量找当前年或前一年的固件.ssh进路由器,可以看到/mnt/sda1 -  让路由器联网,因为需要从网络上下载安 ...

  7. Oracle数据库体系结构、启动过程、关闭过程

    一.Oracle数据库体系结构体系结构由下面组件组成:1.Oracle服务器(Server):由数据库实例和数据库文件组成,另外在用户建立与服务器的连接时启动服务器进程并分配PGA(程序全局区) (1 ...

  8. 一些JavaScript中的DOM的优化小技巧

    在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...

  9. CSS3打造3D效果——perspective transform的深度剖析

    声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...

  10. jsp中jstl标签的类似 if - else 语句 的语法

    在jsp中引入jstl的标签库和函数库 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c&q ...