html如何对span设置宽度


Posted in HTML / CSS onOctober 30, 2019

这是一期分享 HTMLspan 标签,如何设置宽度的问题。

span标签

span 表示行内元素,相当于 inline 属性,只会根据元素的宽度自行展开,自己设置宽度,不起作用。

那如果我特别希望将 span 元素设置为宽度且不设置元素呢?下面通过几个方式去实现。

方式一

设置 span 属性为 span{display:block}; ,呈现的效果如下:

html如何对span设置宽度

但是这样写就体现不了 span 这个标签的作用了,跟 div 功效一致,都表示块级元素。

推荐指数::star2:

方式二

使用 float 属性,设置属性为 span{float:left} ,呈现的效果如下:

html如何对span设置宽度

由于 float 会让这块内容脱离标准文档流,所以要设置宽度,这恰好与我的需求吻合。但是记得最后清除缓存。

由于写的代码量较多,推荐指数::star2::star2::star2::star2:

提示:不了解 float 属性的同学,请自行百度

方式三

使用 display:inline-block 的方式,呈现效果同方式二。

display 常用的有3个属性, inline 为行内元素,与 span 类似。 block 为块级元素,与 div 类似。 inline-block 结合这两者,可以自己设置宽度,且不独占一行。

代码量少,推荐指数::star2::star2::star2::star2::star2:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 #HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 #HTML / CSS
Html5与App的通讯方式详解
Oct 24 #HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 #HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 #HTML / CSS
HTML table 表格边框的实现思路
Oct 12 #HTML / CSS
Html5自定义字体解决方法
Oct 09 #HTML / CSS
You might like
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php语法检查的方法总结
2019/01/21 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
python学习 流程控制语句详解
2016/06/01 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
django 类视图的使用方法详解
2019/07/24 Python
Keras 使用 Lambda层详解
2020/06/10 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
Linux的文件类型
2016/07/05 面试题
亿企通软件测试面试题
2012/04/10 面试题
咖啡蛋糕店创业计划书
2014/01/28 职场文书
保安岗位职责
2014/02/21 职场文书
论文评语大全
2014/04/29 职场文书
管理失职检讨书范文
2015/05/05 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书