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

男娘i 2022-08-19 11:08 19阅读 0赞

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>

显示效果：

![Center][]

[Center]: /images/20220731/f261e9684ded46b49048697c4e52db58.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS块元素、内联元素、内联块元素详解------Sestid

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。 1.块元素块元素，也可以称为行元素，布局中...

红太狼/ 2024年04月18日 21:50/ 0 赞/ 158 阅读

相关 HTML（3）块级元素、内联元素、可变元素

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制

心已赠人/ 2024年02月17日 21:56/ 0 赞/ 154 阅读

相关 CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解

原文网址：[CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN] 简介本文介

傷城~/ 2023年10月01日 08:10/ 0 赞/ 114 阅读

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

css属性 display：inline-block 该属性的特点： 1.允许内联元素显示一行 2.支持宽度和高度 3.如果宽度没有设置，那么根据内容自动撑开。小

男娘i/ 2022年08月19日 11:08/ 0 赞/ 20 阅读

相关【WEB前端】3.CSS内联元素和块元素

HTML中内联元素和块元素分别有块元素(block element) 　　\ address - 地址　　\ blockquote - 块引用

比眉伴天荒/ 2022年08月19日 11:03/ 0 赞/ 220 阅读

相关块级元素及内联元素

问题： <style> \s1\{ width:100px; height:100px; \} </style> 以上

╰半夏微凉°/ 2022年08月05日 11:25/ 0 赞/ 333 阅读

相关块元素和内联元素精炼

块元素：没有任何属性时，默认是独占一行的，可以设置宽高内联元素：没有任何属性时，默认是同行排列，内容过多才会自动换行块元素特点 ①总是在新行上开始； ②高度，行高以

待我称王封你为后i/ 2022年07月11日 07:55/ 0 赞/ 282 阅读

相关 CSS—块与内联

CSS——块与内联 1.块元素块级元素：方块可以装东西，盒子拥有大小 p不能装块内联元素：不占据一行，不能装块级元素升级为块可以装块，但

傷城~/ 2022年06月17日 09:22/ 0 赞/ 259 阅读

相关块级元素、行级（内联）元素、内联块元素的区别

块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(paddin

阳光穿透心脏的1/2处/ 2022年05月30日 08:16/ 0 赞/ 333 阅读

相关玩转CSS中块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。 1.块元素块元素，也可以称为行元素，布局

﹏ヽ暗。殇╰゛Y/ 2021年11月29日 14:18/ 0 赞/ 467 阅读