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:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 让文字居中代码是多少(如何使定义了高度和宽度的< a >里的文字垂直居中实现代码)
- html输入框的宽度怎么设置(html如何对span设置宽度)
- 单元格内容过多超出怎么办(单元格内文本显示超过单元格宽度的快速解决办法)
- html如何设置图片高度和宽度(HTML如何让IMG自动适应DIV容器大小的实现方法)
- table单元格固定宽度
- csstable列宽固定(css display table 自适应高度、宽度问题的解决)
- css 宽度继承(CSS样式中大于号的使用及Css中处理继承方法)
- js实时获取页面宽度(JavaScript获取网页的宽高及如何兼容详解)
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- html样式中css怎么设置行高(CSS设置HTML元素的高度与宽度的各种情况总结)
- 设置超链接宽度和高度
- css如何定义行级元素宽度和高度(CSS块级元素与行级元素详解)
- div中设置图片的大小(div或img图片高度随宽度自适应的方法)
- 融入小人物的喜怒哀乐,黄渤饰演的角色为什么让人观看时欲罢不能(融入小人物的喜怒哀乐)
- 《极限挑战》深访都市夜归人,夜间打工者体验,黄磊录完憔悴了(极限挑战深访都市夜归人)
- Google 推出了一个游戏生成器,让不会编程的你也能自己设计游戏(推出了一个游戏生成器)
- 二胎家庭老大爱闹情绪,用这招很有效(二胎家庭老大爱闹情绪)
- 一个30岁男人外遇失败的全过程(一个30岁男人外遇失败的全过程)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
热门推荐
- SQL中PIVOT 行列转换
- 织梦二次安装教程(重新安装织梦系统以及转移空间、上传空间的方法)
- django删掉模型的字段(django中ORM模型常用的字段的使用方法)
- MVC中报get_RazorKeywords()错误的解决方法
- css语言是干嘛的(Css预编语言及区别详解)
- mysql是否支持透明数据加密(MySQL的加密解密的几种方式小结)
- 织梦插件分站添加地区(织梦自身的友情链接插件会是竖直排列如何使其横向排列)
- python中随机生成不重复随机数(python 在指定范围内随机生成不重复的n个数实例)
- pandas如何指定空数据类型(解决Pandas的DataFrame输出截断和省略的问题)
- apache跳转配置(Apache 的 order deny allow 设置说明)