如何给span设置高度宽度?
内容提要:给Span设置高度和宽度后没有作用。本文介绍了如何如何给span设置高度宽度。
CSS模型中经常用的容器是DIV和span。
给Span设置高度和宽度后没有作用。
- <style type="text/css">
- <!--
- .demo{
- width:100px; height:50px; border:1px solid #009900;
- }
- -->
- </style>
- <span class="demo">www.xin126.cn</a></span>
运行页面:
span 设置高度宽度后不起作用的解决方法:
在span的css中增加display:block属性。
可是这样一来,span之后会自动换行,如何让span 高度宽度起作用,并且不换行?
display有一个inline-block的属性值,可以实现即是inline对象,又可以像block那样设置高度和宽度。
代码:
- <style type="text/css">
- <!--
- .demo{
- width:120px; height:50px; border:1px solid #009900; display:inline-block;
- }
- -->
- </style>
如何给span设置高度宽度?的更多相关文章
- div设置百分比高度 宽度
给div按百分比设置高度 宽度两种方法: 第一种是给body标签设置他的高度值,xxxpx,div就会根据body的像素值取百分比: 第二种方法就是在div属性中加入 position:absolut ...
- 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)
实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...
- html页面设置<span>的高度和宽度
<span>标签属于行内元素(inline),所以无法设置高度和宽度:如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inle-block): 1 span{di ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- span里设置高度
众所周知,SPAN元素内单纯设置height是没有效果的. 需要设置SPAN的高度,需要将其设置成block元素. display:block 但这样会导致span占据了整一行,我们通常不希望这样. ...
- span设置宽度有效无效问题
在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以.例如, <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- ueditor 设置高度height. ue.setHeight(400); 设置宽度 width
1.引入的文件: <script type="text/javascript" src="../../dist/ueditor1_4_3-utf8-php/uedi ...
- HTML 的超链接 a 标签中如何设置其宽度和高度?
HTML 的超链接 a 标签中如何设置其宽度和高度? 在DIV CSS布局中,html 中 a 超链接标签,直接对其设置宽度和高度不能生效,设置宽度和高度也不起作用,这里为大家分享如何实现 a 标签宽 ...
- select设置高度的兼容问题
在IE678下,我们给select设置高度的话,里面的option无法居中,折中的兼容方式就是,我们给select的border:0:外面套一层div,这个div给他设置padding,让select ...
随机推荐
- FastSocket.Net
Overview FastSocket是一个轻量级易扩展的c#异步socket通信库,项目开始于2011年,经过近3年不断调整与改进,目前在功能和性能上均有不错的表现. 项目地址:https://gi ...
- mycat配置日志
1: 1: MySql Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' ...
- RESTful 良好的API设计风格
1.使用名词而不是动词 Resource资源 GET读 POST创建 PUT修改 DELETE /cars 返回 cars集合 创建新的资源 批量更新cars 删除所有cars /cars/711 返 ...
- WIN7 64位如何添加网络打印机
http://wenku.baidu.com/view/2d64bef0f61fb7360b4c65ac.html 该文介绍的比较详细,并且我按照他的方法,确实安装成功了.
- Ubuntu下的防火墙
Ubuntu下的防火墙Gufw-ufw Gufw是ufw的桌面版本,网上有Gufw的安装和配置方法,但是我认为并不是很好.网上的教程也有点愚弄大众的嫌疑,因为按照他的说法,最后防火墙根本就无法自动启动 ...
- fusioncharts图例(legend)属性
图例用来在多系列图和混合图中将图形和对应的系列名称联系起来. 从v3.2开始,每个系列的名称前面会展示对应的icon图标,这些图标具有交互作用,用户可以通过点击这些图标来显示或者隐藏对应的数 ...
- eclipse中对项目进行分类管理
我们在用Eclipse开发的时候通常会建很多类型的项目,如公司项目.自己项目.Demo等等,并且一个项目又可能有一个主项目和多个引用包,如果包所有的项目都放到一个workspace下面,则会引起混来, ...
- Webkit CSS properties
Webkit CSS properties -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit- ...
- UML系列01之 UML和绘图工具Visio介绍
概要 UML,全称是Unified Modeling Language,中文是"统一建模语言".通俗点说,UML是一种创建模型的语言.UML是在开发阶段,说明,可视化,构建和书写一 ...
- 【初识 JQMobile 小小总结】
作为一个前端新手,之前还没有接触过手机端的项目.两周前项目经理告诉我要做手机端,让我用JQMobile. 之前在前端群里,偶尔听说过jqmobile很坑,自己又查了下其他框架,比如zepto.amaz ...