转自 Coding,changing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http ://www.w3.org/1999/xhtml " >
<head>
<title>Test Span</title>
<style type="text/css">
span {
background-color:#ffcc00;
width:150px ;
}
</style>
</head >
<body>
fixed <span >width</span> span
</body>
</html>
通过试验以后发现，无效，无论是在Firefox还 是IE中都无效 。
通过查阅 CSS2标准中关于width 的定义发现，原来CSS中的 width 属性并不总是有效的，如果对象是 inline 对象，width 属性就会被忽略。Firefox 和 IE 原来是遵循了标准才这样做的。
修改 span 为 block 类型并设置 float 不是完美解决
在span的CSS中增加display属性，将span设置为block类型的Element，这样宽度的确有效了，不过也把前后文字隔在不同行里面。这样其实span就完全变成了div。
span { background-color:#ffcc00; display:block; width:150px;}
很多人会建议再增加一个CSS 属性 float ，这样的确在某种条件下能解决问题。比如我们的例子中，如果span前面没有文字 ，那的确是可行的。但是如果有了，前后文字就会连在一起，而span跑到了第二行。span { background-color:#ffcc00; display:block; float:left; width:150px;}
设置 span 宽度的完美解决方案
下面代码的 CSS定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的CSS属性采取忽略处理的态度，所以最好将 display:inline -block行写在后面，这样在Firefox里面，如果到了未来的Firefox 3，这一行就能起作用，代码可以同时兼容各种版本。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Test Span</title>
<style type="text/css">
span {
background-color:#ffcc00;
display:-moz-inline-box;
display:inline-block;
width:150px;
}
</style>
</head>
<body>
fixed <span>width</span> span
</body></html>
分享到：
相关推荐
然而，当需要为Span标签设定固定宽度时，就会遇到一些挑战，因为CSS中的width属性对inline元素不起作用。在本文中，我们将探讨如何在不同情况下将Span标签设置为固定宽度，并理解不同display属性的差异。 首先，让...
在某些设计需求中，可能需要将`<span>`标签设置为固定宽度，以便控制元素的布局。本文将详细讲解如何实现这一目标，并探讨与之相关的CSS概念。 首先，我们需要理解CSS中的三种主要元素类型：块级元素（block-level...
2. **前后有文本的`<span>` 设置固定宽度**： 如果`<span>` 位于其他文本之间，比如 `ABC<span>DEF</span>GH`，可以使用 `float` 属性，同时保持 `display: block`，使`<span>` 能够设置宽度并保持在行内。代码如下...
在HTML中，<span>是一个内联元素（Inline Element），默认情况下没有固定的宽度和高度。如果开发者尝试通过CSS为<span>设置width属性，往往会发现宽度并没有被应用。这主要是因为，当元素被定义为内联类型时，CSS的...
在《CSS设计彻底研究》中对设计中常用的网页元素和布局方式都给出详细的分类和归纳，并讲解了完整的解决方法，主要包括各种导航菜单（水平的、竖直的、固定宽度的、自适应宽度的、下拉的等），Tab面板、伸缩面板和...
在CSS中实现菜单背景自适应宽度，主要是利用CSS的背景属性和盒模型来达到效果。在给定的示例中，我们看到一个简单的HTML结构，包含两个类为".load"的`<div>`元素，每个`<div>`内部包含一个`<span>`标签，用于显示...
如果想让<span>标签有固定的宽度，必须通过CSS显式地设置width属性的值。例如，若希望每个<span>标签占据总宽度的1/3，可以设置每个<span>的width为33.33%。 另外，display属性的不同值决定了元素在文档流中的表现...
4. 二列固定宽度：两个并排的`<div>`，各自设定固定宽度。 5. 二列宽度自适应：一列固定，另一列占据剩余空间。 6. 两列右列宽度自适应：左侧列固定，右侧列自适应。 7. 两列固定宽度居中：两个并排`<div>`居中，...
11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例：电子相册 11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架搭建 ...
第1章 （X）HTML与CSS核心基础 ...第13章 固定宽度布局剖析与制作 第14章 变宽度网页布局剖析与制作 第15章 “CSS禅意花园”作品研究 第16章 综合案例研究 第17章 从学习到创作 附录 CSS英文小字典
如果父元素设置了固定或相对的宽度，并且小于`<span>`设定的宽度，那么`<span>`的实际宽度将被父元素约束。因此，确保父元素能够容纳设定宽度的`<span>`也是很重要的。 在实际应用中，可能还需要处理其他与浏览器...
如果没有额外的CSS设置，`<span>`将在行内显示，而`<p>`将独自占据一行。如果想要改变这种默认行为，可以通过设置`display`属性来实现。例如，如果希望`<span>`元素像块级元素一样显示，可以添加以下CSS： ```css ...
在本例中，.nava的宽度是固定的，而<span>标签则根据内容宽度自动调整，从而实现了自适应。 知识点二：CSS选择器和伪类 在CSS代码中，我们可以看到诸如.nav和.nava这样的类选择器，以及:hover和:focus这样的伪类。...
9.5.4 二列固定宽度居中 209 9.6 三列布局 210 9.6.1 中列宽度自适应 210 9.6.2 三栏布局 212 9.7 高度自适应 215 9.8 小结 216 第4篇 实战演习 第10章 div+CSS打造Blog版面 218 10.1 页面布局和规划 219 10.1.1 ...
11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例：电子相册 11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架...
11.2 固定宽度且居中的版式 11.3 左中右版式 11.4 块的背景色问题 11.5 排版实例：电子相册 11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架搭建 ...
5. 设计 #content 对象部分：中间列宽度固定，左右两列没有内容，因此不需要考虑，主体显示部分为三行，分别显示网页不同区域。 6. 设计 #footer 对象部分。 三、实验情况和实验结果 1. 页面总体布局 2. 网页 logo...
…… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10章 表格也精彩 第11章 圆角设计 第12章 应用Spry制作高级网页组件 第13章 固定宽度布局剖析与制作 第14...