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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
不要在HTML中滥用div
May 08 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
JS不完全国际化&本地化手册 之 理论篇
2016/09/27 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
python爬虫可以爬什么
2020/06/16 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
ORACLE第二个十问
2013/12/14 面试题
环境工程大学生自荐信
2013/10/21 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
高中生家长寄语大全
2014/04/03 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
社区母亲节活动总结
2015/02/10 职场文书
2015年双拥工作总结
2015/04/08 职场文书