CSS - Span 下的width设置不可用？

解决：Span 下的width设置不可用？

内联元素-span有根据内容自动伸缩的能力，当需要对其宽度设定时，出现无效的情况。

Demo：http://jsfiddle.net/JSDavi/ad62kvga/

方案：修改display：inline-block；

时间： 2024-10-08 13:22:58

CSS - Span 下的width设置不可用？的相关文章

css中 Span 元素的 width 属性无效果原因及多种解决方案

先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度这是因为:对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素) width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout .而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 he

css中 Span 元素的 width 属性无效果原因及多种解决方案（转自http://www.cnblogs.com/hnyei/archive/2012/03/12/2392026.html）

span 标记 width 设置

最近在做点关于数据表格的修改工作,如下所示: 上图中使用了EasyUi中的 datagrid 控件,很多情况下需要实现用户单击或者双击某一行,弹出某一行信息的效果,如下图所示: 弹框中的每一个信息input框都有个span标签来做个信息展示,通常情况下,信息的字数个数不一样,所以就产生了如下问题:字数不一致的时候的对齐问题.如图中所示:通过设置span标记的width属性不起作用. 然后,会有一些方法来解决这个问题,比如:span标记外层放一个div标签,通过div标签的width属性来控制sp

Css下拉菜单设置

前端之css（宽高）设置小技巧

一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小,最大宽度: a)最小高度 min-height:value; IE6不识别min-height属性,解决方案如下: 方案一:min-height:100px; _height:100px; 方案二:min-height:100px; height:auto!important; height:10

DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚线下划线列表型CSS虚线下划线 CSS定义一条水平虚线 1.CSS边框虚线 - TOP 这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示其它意思.一.四边为虚线边框border

分别用js 和 html/css实现下拉菜单特效

在网站的制作过程,我们常常会遇到导航栏中会出现一级菜单,二级菜单这样的现象,到底如何实现呢?接下里我们用两种方法来实现: 1.用js来实现此效果: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">

CSS+JS下拉菜单和纯CSS下拉菜单

一.CSS+JS下拉菜单原理:一级菜单的li中包含二级菜单ul.在鼠标没有移上去时,二级菜单的ul是display:none的状态,鼠标一移上去变成display:block.改变这个display属性值是通过JS来实现.鼠标hover时,把整个二级菜单的ul给display出来,用到的事件onmouseonver.鼠标移出又把整个二级菜单的ul 给隐藏掉. nav-js.html文件 <!DOCTYPE html > <html> <head> <meta c

纯css+js下拉菜单实例代码

纯css+js下拉菜单实例代码分享一个css+js下拉菜单代码,js+css实现的简单下拉菜单,兼容性不错. 例子:<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <