内容提要:给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. 用 Wireshark 图解:TCP 三次握手

    摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! “snow warn throughout the winter” 一.什么是 Wireshar ...

  2. 完成端口(Completion Port)详解(转)

    手把手叫你玩转网络编程系列之三    完成端口(Completion Port)详解                                                           ...

  3. Unity3D 中 Generic 动画导入设置和 Root Motion 之间的关系

    2条评论 Unity3D 的 Mecanim 动画系统可以直接复用 3DS MAX 中制作的动画文件中的位移,这个就是通过 applyRootMotion 来达成的,我们只需要在使用 Animator ...

  4. (转)关于tcp和udp的缓冲区

    (一)基础知识 IPv4 数据报最大大小是65535(16位),包括IPv4头部. IPv6 数据报最大大小是65575,包括40个字节的IPv4头部 MTU,这是由硬件规定的,如以太网的MTU是15 ...

  5. ionic button笔记

    源码文件:_button.scss 和 _button-bar.scss,以及_variables.scss(66行-163行). 按钮是手机app不可或缺的一部分,不同风格的app,需要的按钮多种多 ...

  6. HMM 自学教程(一)引言

    本系列文章摘自 52nlp(我爱自然语言处理: http://www.52nlp.cn/),原文链接在 HMM 学习最佳范例,这是针对 国外网站上一个 HMM 教程 的翻译,作者功底很深,翻译得很精彩 ...

  7. 15套帮助你展示 App 设计的透视屏幕原型素材

    Dribbble 和 Behance 是最好两个展示你的设计作品的地方.现在流行使用透视屏幕来展示应用程序设计效果,尤其是在 Dribbble 上面,有众多高品质的免费资源和设计素材. 这篇文章汇集了 ...

  8. java io系列15之 DataOutputStream(数据输出流)的认知、源码和示例

    本章介绍DataOutputStream.我们先对DataOutputStream有个大致认识,然后再深入学习它的源码,最后通过示例加深对它的了解. 转载请注明出处:http://www.cnblog ...

  9. 继续谈论XSS

    这篇文章基于上篇谈论XSS ,想说下自己工作过程中遇到的xss的问题. 易出现XSS的场景 1 jsonp 说说jsonp 中也有说过,jsonp其实是很容易出现安全问题的.由于jsonp的callb ...

  10. 为了去重复,写了一个通用的比较容器类,可以用在需要比较的地方,且支持Lamda表达式

    为了去重复,写了一个通用的比较容器类,可以用在需要比较的地方,且支持Lamda表达式,代码如下: public class DataComparer<T>:IEqualityCompare ...