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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 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 一个页面执行时间类代码
2010/03/05 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Vuex简单入门
2017/04/19 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
深入理解Django的中间件middleware
2018/03/14 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python删除某个目录文件夹的方法
2020/05/26 Python
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
家长给孩子的评语
2014/01/30 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2015年新教师工作总结
2015/04/28 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
初一数学教学反思
2016/02/17 职场文书
《穷人》教学反思
2016/02/19 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
vue 实现上传组件
2021/05/31 Vue.js
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL