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 相关文章推荐
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
python各种excel写入方式的速度对比
2020/11/10 Python
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA