html输入框的宽度怎么设置(html如何对span设置宽度)
类别:Web前端 浏览量:2418
时间:2021-10-04 01:37:39 html输入框的宽度怎么设置
html如何对span设置宽度这是一期分享 HTML
中 span
标签,如何设置宽度的问题。
span标签
span
表示行内元素,相当于 inline
属性,只会根据元素的宽度自行展开,自己设置宽度,不起作用。
那如果我特别希望将 span
元素设置为宽度且不设置元素呢?下面通过几个方式去实现。
方式一
设置 span
属性为 span{display:block};
,呈现的效果如下:
但是这样写就体现不了 span
这个标签的作用了,跟 li
功效一致,都表示块级元素。
推荐指数::star2:
方式二
使用 float
属性,设置属性为 span{float:left}
,呈现的效果如下:
由于 float
会让这块内容脱离标准文档流,所以要设置宽度,这恰好与我的需求吻合。但是记得最后清除缓存。
由于写的代码量较多,推荐指数::star2::star2::star2::star2:
提示:不了解 float
属性的同学,请自行百度
方式三
使用 display:inline-block
的方式,呈现效果同方式二。
display
常用的有3个属性, inline
为行内元素,与 span
类似。 block
为块级元素,与 li
类似。 inline-block
结合这两者,可以自己设置宽度,且不独占一行。
代码量少,推荐指数::star2::star2::star2::star2::star2:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- div中设置图片的大小(div或img图片高度随宽度自适应的方法)
- table单元格固定宽度
- css 宽度继承(CSS样式中大于号的使用及Css中处理继承方法)
- 让文字居中代码是多少(如何使定义了高度和宽度的< a >里的文字垂直居中实现代码)
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- html如何设置图片高度和宽度(HTML如何让IMG自动适应DIV容器大小的实现方法)
- csstable列宽固定(css display table 自适应高度、宽度问题的解决)
- html输入框的宽度怎么设置(html如何对span设置宽度)
- css如何定义行级元素宽度和高度(CSS块级元素与行级元素详解)
- 单元格内容过多超出怎么办(单元格内文本显示超过单元格宽度的快速解决办法)
- html样式中css怎么设置行高(CSS设置HTML元素的高度与宽度的各种情况总结)
- 设置超链接宽度和高度
- js实时获取页面宽度(JavaScript获取网页的宽高及如何兼容详解)
- 朋友圈屏蔽你的人,可以直接看淡了(朋友圈屏蔽你的人)
- 金球奖只青睐那些会戴珠宝的女人(金球奖只青睐那些会戴珠宝的女人)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
热门推荐
- mysql存储引擎是什么(详解mysql中的存储引擎)
- 缓存系统机制(Smarty缓存机制实例详解三种缓存方式)
- plsql提示developer(PL/SQL Developer过期的两种解决方法)
- mysql数据库与表的基本操作总结(Mysql、Oracle中常用的多表修改语句总结)
- mysql怎么给查询权限(MySql设置指定用户数据库查看查询权限)
- react循环有几种方法(React forwardRef的使用方法及注意点)
- python3json序列化(Python3.5 Json与pickle实现数据序列化与反序列化操作示例)
- mysql添加数据很慢(mysql如何优化插入记录速度)
- mysqlexplain解析(Mysql explain用法与结果深入分析)
- linux增加静态路由(Linux添加静态路由两种实现方法解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9