内容提要:给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设置高度宽度?的更多相关文章

  1. div设置百分比高度 宽度

    给div按百分比设置高度 宽度两种方法: 第一种是给body标签设置他的高度值,xxxpx,div就会根据body的像素值取百分比: 第二种方法就是在div属性中加入 position:absolut ...

  2. 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  3. html页面设置<span>的高度和宽度

    <span>标签属于行内元素(inline),所以无法设置高度和宽度:如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inle-block): 1 span{di ...

  4. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  5. span里设置高度

    众所周知,SPAN元素内单纯设置height是没有效果的. 需要设置SPAN的高度,需要将其设置成block元素. display:block 但这样会导致span占据了整一行,我们通常不希望这样. ...

  6. span设置宽度有效无效问题

    在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以.例如, <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  7. ueditor 设置高度height. ue.setHeight(400); 设置宽度 width

    1.引入的文件: <script type="text/javascript" src="../../dist/ueditor1_4_3-utf8-php/uedi ...

  8. HTML 的超链接 a 标签中如何设置其宽度和高度?

    HTML 的超链接 a 标签中如何设置其宽度和高度? 在DIV CSS布局中,html 中 a 超链接标签,直接对其设置宽度和高度不能生效,设置宽度和高度也不起作用,这里为大家分享如何实现 a 标签宽 ...

  9. select设置高度的兼容问题

    在IE678下,我们给select设置高度的话,里面的option无法居中,折中的兼容方式就是,我们给select的border:0:外面套一层div,这个div给他设置padding,让select ...

随机推荐

  1. 一步步教你搭建VS环境下用C#写WebDriver脚本

    一步步教你搭建VS环境下用C#写WebDriver脚本http://www.automationqa.com/forum.php?mod=viewthread&tid=3529&fro ...

  2. [LeetCode] Additive Number

    Af first I read the title as "Addictive Number". Anyway, this problem can be solved elegan ...

  3. [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 ...

  4. (转)2G到C-RAN网络架构的演进

    这是我一个学霸师弟写的一篇知识普及的文章,涉及到的知识结构很全面,很丰富,对网络通信技术感兴趣的童鞋可以看看,内容我就不贴过来了,直接到他博客上去看吧. 2G到C-RAN网络结构演进

  5. ios面试技术要点

    iOS面试 技术总结点(可参考):多线程 运行时 runloop app框架 几种动画编程 jsonmodel原理 sdwebimage原理 masonry怎么应用及原理 应用框架有哪些 说一下Fac ...

  6. 菜鸟学Windows Phone 8开发(3)——布局和事件基础

    本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发  本文地址:http://channel9.msdn.com/Series/Windows-Phone-8-Develo ...

  7. java中getBytes方法可能使图片文件产生的问题

    InputStream is = new FileInputStream(fl); ImageInputStream iis = ImageIO.createImageInputStream(is); ...

  8. 看那记不住命令的猿,如何使用GitHub

    什么是GitHub呢? GitHub是什么?好吧, 请看百科:http://baike.baidu.com/view/3366456.htm 准备:msysgit.tortoisegit 首先,我们得 ...

  9. [git]用pelican搞一个自己的blog(已完成)

    pelican Pelican Static Site Generator, Powered by Python:Pelican是python语言写的静态网站生成器.因为我一直打算用github pa ...

  10. 关于SQL SERVER高并发解决方案

    现在大家都比较关心的问题就是在多用户高并发的情况下,如何开发系统,这对我们程序员来说,确实是值得研究,最近找工作面试时也经常被问到,其实我早有去关心和了解这类问题,但一直没有总结一下,导致面试时无法很 ...