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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
纯html+css实现Element loading效果
Aug 02 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安装攻略:常见问题解答(二)
2006/10/09 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
浅谈php的优缺点
2015/07/14 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
Display SQL Server Version Information
2007/06/21 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
让python json encode datetime类型
2010/12/28 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Python新手如何理解循环加载模块
2020/05/29 Python
python爬取微博评论的实例讲解
2021/01/15 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
暑期培训心得体会
2014/09/02 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang