行内元素如何转换成行内块元素使用？

做成下面的效果该如何来做呢？

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内块元素练习</title><style>.box {margin: 211px auto;text-align: center;color: #333;}.box a {display: inline-block;height: 36px;width: 36px;border: 1px solid #ccc;text-align: center;line-height: 36px;background-color: #f7f7f7;text-decoration: none;color: #333;}.box .prev,.box .next {width: 72px;}input{width: 40px;height: 34px;outline: none;border: 1px solid #ccc;}button{width:72px;height: 36px;line-height: 36px;border: 1px solid #ccc;background-color: #f7f7f7;}.box .current{border: none;background-color: #fff;}</style>
</head><body><div class="box"><a href="#" class="prev">&lt;&lt;上一页</a><a href="#">1</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#" class="next">&gt;&gt;下一页</a>到第<input type="text">页<button>确定</button></div>
</body></html>

总结：主要用到行内元素与行内块元素的转换问题、和一些基础的问题。

行内元素如何转换成行内块元素使用？相关推荐

【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )
文章目录一.Display 显示模式转换二.块元素示例三.inline-block 改元素为行内块元素示例四.为块元素设置浮动五.为块元素设置定位一.Display 显示模式转换 disp ...
[html] 给内联元素加float与给块元素加float有什么区别？
[html] 给内联元素加float与给块元素加float有什么区别? 内联元素加float无效个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...
[html] 列举下哪些块元素里面不能放哪些块元素呢？
[html] 列举下哪些块元素里面不能放哪些块元素呢? p.h1.....h6等不能嵌套块级元素. ul.ol.table.dl等内部必须是固定的元素. 个人简介我是歌谣,欢迎和大家一起交流前后端知 ...
html块状元素高度,CSS：如何计算块元素的高度？
Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' This section ...
css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换
标签显示模式display: HTML标签一般分为块标签(块元素:block-level)和行内标签(行内元素:inline-level)两种类型,但是还有第三种说法行内块元素:table-row-g ...
块元素，行内元素，行内块元素及其元素转换
文章目录元素的显示方式 1.块元素(block element) 常见的块元素: 块级元素特点 2.行内元素(inline element) 常见的行内元素: 行内元素的特点: 3.行内块元素常见 ...
陈力：传智播客古代珍宝币泡泡龙游戏开发第九讲：块元素、行内元素、标准流、盒子模型
陈力:传智播客古代珍宝币泡泡龙游戏开发第九讲:块元素.行内元素.标准流.盒子模型 DIV+CSS将显示和数据分离,极大的方便了贵阳网站建设时布局的灵活性.将节对DIV+CSS中类选择器.id选择器 ...
块元素，行内元素，行内块元素及相互转换
块元素常见级特点: div 块 p 段落 ul li 有序列表 ol li 无序列表 dl dd dt 自定义列表 h1 大标题 h2 副标题 h3 3级标题 h4 4级标题 h ...
常见的块级元素、行内元素、行内块元素
一.块级元素 block 1. 特点: 自动换行独占一行可设置宽高默认宽度为父元素的宽度 2.常见块级元素 div.p.h1~h6.ul.ol.dl.li.dd.table.hr.blockqu ...

行内元素如何转换成行内块元素使用？

行内元素如何转换成行内块元素使用？相关推荐

最新文章

热门文章