装载自：
http://www.iwcpu.com/html/web578.html
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概念。 首先，我们需要理解CSS中的三种主要元素类型：块级元素（block-level...
然而，当需要为Span标签设定固定宽度时，就会遇到一些挑战，因为CSS中的width属性对inline元素不起作用。在本文中，我们将探讨如何在不同情况下将Span标签设置为固定宽度，并理解不同display属性的差异。 首先，让...
2. **前后有文本的`<span>` 设置固定宽度**： 如果`<span>` 位于其他文本之间，比如 `ABC<span>DEF</span>GH`，可以使用 `float` 属性，同时保持 `display: block`，使`<span>` 能够设置宽度并保持在行内。代码如下...
这种设置可以让<span>保持在行内，同时允许开发者为其设置宽度和高度。这是一种更为精细的控制方式，能更贴合内联元素的语义，同时实现宽度的设置。此外，由于浏览器会忽略它们不支持的CSS属性，因此为了向后兼容...
如果父元素设置了固定或相对的宽度，并且小于`<span>`设定的宽度，那么`<span>`的实际宽度将被父元素约束。因此，确保父元素能够容纳设定宽度的`<span>`也是很重要的。 在实际应用中，可能还需要处理其他与浏览器...
如果想让<span>标签有固定的宽度，必须通过CSS显式地设置width属性的值。例如，若希望每个<span>标签占据总宽度的1/3，可以设置每个<span>的width为33.33%。 另外，display属性的不同值决定了元素在文档流中的表现...
本文主要介绍如何利用Vue框架实现一个input输入框，让其宽度能够随着用户输入的文字长度动态调整，以适应不同长度的输入内容。 在日常的前端开发过程中，我们经常会遇到需要根据输入内容自动调整宽度的场景，以提升...
例如，将`div`的`display`属性设置为`inline`或`inline-block`，可以使`div`在一行内显示，而将`span`的`display`属性设置为`block`则可以让`span`占据一整行。 在实际应用中，`span`常用于在同一行内对文字或图片...
`float`属性用于让元素浮动，常见值有`left`、`right`和`none`，常用于创建多列布局。`clear`属性用于防止元素被浮动元素覆盖，值可以是`left`、`right`或`both`。`visibility`控制元素是否可见，`overflow`决定内容...
通常有以下两种方法： **方法1**：通过在`router.js`中修改路由的`meta`属性，然后在`main.js`中监听路由变化来更新页面的meta信息和title。 ```javascript // router.js { path: '/teachers', name: 'TDetail', ...
`div`中的内容如果是内联元素（如`<span>`, `<a>`等），它们默认不会影响`div`的高度。此时，需要确保内联元素转换为块级元素或设置`div`的高度。 **解决方案：** 1. 将内联元素转换为块级元素，如`display: block;...
- 三列布局可以分为自适应宽度或固定宽度，原理类似两列布局，但需要处理中间列与两侧列的关系，可能需要用到`float`、`margin`以及可能的负边距技巧来调整布局。 5. **XHTML的块级元素（div）和内联元素（span）*...
Bootstrap的响应式12列格网系统是其核心组成部分之一，提供了fixed（固定宽度）和fluid（流动宽度）两种布局方式。默认情况下，Bootstrap的固定宽度格网系统宽度为940像素，这意味着页面的默认宽度是940px，每个...
为了让背景图片随着菜单项的宽度自适应，我们可以使用CSS3中的背景裁剪（background-size）属性。但是，在给定的代码中，并没有使用到这个属性，而是通过定位和内边距来实现。`.load`类的`<div>`设置了`position: ...
首先，让我们深入理解这个"Bootstrap-html渐变顶部固定自适应导航栏"的概念。渐变导航栏是指在导航栏背景色上应用了两种或更多颜色的平滑过渡，这通常通过CSS中的`linear-gradient`函数实现。顶部固定意味着无论用户...
左边的元素固定宽度，并设置了overflow:hidden以隐藏溢出内容。右边元素使用position:absolute和right:0来确保它总是浮动在父元素的右侧。 接下来是JavaScript部分的核心内容。通过使用document....
此外，设置一个固定的 `font-size` 有助于保证计算的准确性： ```css #ruler { visibility: hidden; white-space: nowrap; font-size: 24px; } ``` 接下来，我们需要在 String 的原型上扩展一个新的方法 `...
一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。 利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来...