如何给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 ...
随机推荐
- 一步步教你搭建VS环境下用C#写WebDriver脚本
一步步教你搭建VS环境下用C#写WebDriver脚本http://www.automationqa.com/forum.php?mod=viewthread&tid=3529&fro ...
- [LeetCode] Additive Number
Af first I read the title as "Addictive Number". Anyway, this problem can be solved elegan ...
- [LeetCode] Number of Islands II
Problem Description: A 2d grid map of m rows and n columns is initially filled with water. We may pe ...
- (转)2G到C-RAN网络架构的演进
这是我一个学霸师弟写的一篇知识普及的文章,涉及到的知识结构很全面,很丰富,对网络通信技术感兴趣的童鞋可以看看,内容我就不贴过来了,直接到他博客上去看吧. 2G到C-RAN网络结构演进
- ios面试技术要点
iOS面试 技术总结点(可参考):多线程 运行时 runloop app框架 几种动画编程 jsonmodel原理 sdwebimage原理 masonry怎么应用及原理 应用框架有哪些 说一下Fac ...
- 菜鸟学Windows Phone 8开发(3)——布局和事件基础
本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发 本文地址:http://channel9.msdn.com/Series/Windows-Phone-8-Develo ...
- java中getBytes方法可能使图片文件产生的问题
InputStream is = new FileInputStream(fl); ImageInputStream iis = ImageIO.createImageInputStream(is); ...
- 看那记不住命令的猿,如何使用GitHub
什么是GitHub呢? GitHub是什么?好吧, 请看百科:http://baike.baidu.com/view/3366456.htm 准备:msysgit.tortoisegit 首先,我们得 ...
- [git]用pelican搞一个自己的blog(已完成)
pelican Pelican Static Site Generator, Powered by Python:Pelican是python语言写的静态网站生成器.因为我一直打算用github pa ...
- 关于SQL SERVER高并发解决方案
现在大家都比较关心的问题就是在多用户高并发的情况下,如何开发系统,这对我们程序员来说,确实是值得研究,最近找工作面试时也经常被问到,其实我早有去关心和了解这类问题,但一直没有总结一下,导致面试时无法很 ...