内容提要:给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. unity3d 本地数据存储

    using UnityEngine; using System.Collections; //路径工具类 public class PathKit { /** 后缀常量字符 */ public con ...

  2. messages.exe病毒的清理

    一.问题提出 20161021,10点05分,发现messages.exe突然出现在进程中,计算机突然重启,msconfig启动目录里多了一项c:\windows\system32\Drivers\m ...

  3. 【Java设计模式】单例模式

    ### 1. 概述> 单例模式是确保某一个类中有且只有一个实例. ----------### 2. 饿汉式单例``` javapublic class SingletonInstance { p ...

  4. 转载:Linux kernel rt_mutex的背景和简介

    From: http://blog.chinaunix.net/uid-23146151-id-3074045.html 最近在看linux rtmutex部分的实现过程,就像他注释中写的一样,还是比 ...

  5. 听声辨位识DUMP

    要处理的dump成千上万,每个都用眼睛去看也太累了,不如用耳朵听好了.相信经过一段时间适应,一定可以做到凭听就解决dump分析.(逃 DumpMusican 这个小exe只需要把dump路径作为参数传 ...

  6. ArcGIS如何将表连接到空间数据上

    当我们有一些空间数据和一些业务数据(表),希望把业务数据和空间数据连接起来时,可以采用ArcGIS Desktop进行操作.本文将介绍如何在ArcGIS Destop中将表和空间数据关联起来. Arc ...

  7. 菜鸟学Windows Phone 8开发(4)——设置应用程序样式

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

  8. 剑指架构师系列-InnoDB存储引擎、Spring事务与缓存

    事务与锁是不同的.事务具有ACID属性: 原子性:持久性:由redo log重做日志来保证事务的原子性和持久性,一致性:undo log用来保证事务的一致性隔离性:一个事务在操作过程中看到了其他事务的 ...

  9. 手动测试——MTM

    在Test Manager中,测试计划用于管理某个迭代的整个测试工作.包括测试用例.测试结果,计划测试的配置. Test Center分为4个主要活动区域: Plan---用于管理整个测试计划,包括计 ...

  10. Mybatis 示例之 SelectKey

    SelectKey在Mybatis中是为了解决Insert数据时不支持主键自动生成的问题,他可以很随意的设置生成主键的方式. 不管SelectKey有多好,尽量不要遇到这种情况吧,毕竟很麻烦. sel ...