【WEB前端】3.（扩展）内联块

来源：互联网发布：js push 数组对象编辑：程序博客网时间：2024/06/06 04:38

css属性 display：inline-block

该属性的特点：

1.允许内联元素显示一行

2.支持宽度和高度

3.如果宽度没有设置，那么根据内容自动撑开。

小例子：

一个分页小效果

<body>        <div class="pagebox">            <a href="" class="pageBtn">上一页</a>            <a href="">1</a>            <a href="">2</a>            <a href="" class="active">3</a>            <a href="">4</a>            <a href="">5</a>            <a href="">6</a>            <a href="" class="pageBtn">下一页</a>        </div>    </body>

css代码

<style type="text/css">            a{                border:1px solid #e0e1e0;                width: 17px;                height: 20px;                /*如果用block 由于block是独占一行的  所以改为inline -block*/                display: inline-block;                text-align: center;                line-height: 20px;                text-decoration: none;                color: #2052a3;                font-size: 12px/20px "宋体";            }            .pageBtn{                width: 64px;            }            a:hover{                background-color: #1f3a87;                color: #fff;            }            .active{                color: #fff;                background-color: #1f3a87;            }        </style>

显示效果：

0 0