内容提要:给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. idea启动tomcat失败,1099端口被占用

    今天遇到一个问题,当使用idea启动一个tomat服务的时候,报错:不能连接本地1099端口. /Users/liqiu/soft/develop/apache-tomcat-/bin/catalin ...

  2. Domain Space

    Bluehost Register Page http://www.bluehost.com/track/weipengp

  3. 在linux下挂载、卸载U盘

    首先你得保证你的U盘的格式是fat格式. 先进入/mnt/目录新建一个usb目录 cd /mnt/ mkidr usb 先fdisk -l,然后插上U盘,fdisk -l 查看是否有新的硬盘添加上来了 ...

  4. bit操作 转

    http://www.catonmat.net/blog/low-level-bit-hacks-you-absolutely-must-know/ Bit Hack #6. Turn off the ...

  5. 【Android学习】XML文本的三种解析方式(通过搭建本地的Web项目提供XML文件)

    XML为一种可扩展的标记语言,是一种简单的数据存储语言,使用一系列简单的标记来描述. 一.SAX解析 即Simple API for XML,以事件的形式通知程序,对Xml进行解析. 1.首先在Web ...

  6. zepto - scrollLeft

    <div style="border:1px solid black;width:100px;height:130px;overflow:auto"> The long ...

  7. Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问

    本篇内容还是建立在上一篇Java Web学习系列——Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Jar包 这 ...

  8. codeforces B. Strongly Connected City(dfs水过)

    题意:有横向和纵向的街道,每个街道只有一个方向,垂直的街道相交会产生一个节点,这样每个节点都有两个方向, 问是否每一个节点都可以由其他的节点到达.... 思路:规律没有想到,直接爆搜!每一个节点dfs ...

  9. 编写高质量JS代码的68个有效方法(五)

    No.21.使用apply方法通过不同数量的参数调用函数 Tips: 使用apply方法自定一个可计算的参数数组来调用可变参数的函数 使用apply方法的第一个参数给可变参数的方法提供一个接收者 // ...

  10. 使用 Web Tracing Framework 分析富 JS 应用的性能

    来自谷歌的 Web Tracing Framework 包含一组工具和脚本,用于 JavaScript 相关代码的性能分析.它是重 JavaScript 应用程序的理想选择,而 JavaScript ...