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网格的三个新特性详解
Apr 04 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 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
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
浅谈PHP的反射API
2017/02/26 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php给数组赋值的实例方法
2019/09/26 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python实现字符串格式化的方法小结
2017/02/20 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python实现飞机大战游戏
2020/10/26 Python
详解python 爬取12306验证码
2019/05/10 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
护士找工作求职信
2014/07/02 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
经典导游欢迎词
2015/01/26 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技