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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
HTML基础详解(下)
Oct 16 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php类的定义与继承用法实例
2015/07/07 PHP
PHP概率计算函数汇总
2015/09/13 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
学校经典推荐信
2013/10/30 职场文书
校园门卫岗位职责
2013/12/09 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android