加载中…[转载]设置行内标签（如<span>标签）宽度高度方法（html+css）
(2013-04-24 16:16:20)
标签：
cssspancss/span/宽度和高度it |
分类： technical-css-method |
设置行内标签（如<span>标签）宽度高度方法（html+css）
思路：这看上去是个很简单的问题，似乎用style中的width属性就可以。然而通过试验以后发现，无论是在Firefox还是IE中都无效。
1、初步解决span宽度方案
修改span为block类型。在span的css中增加display属性，将span设置为block类型。
span {
background-color:#fc0;
display:block;
width:150px;
}
这样宽度就可以实现了，不过这样做也把前后文字隔在不同行里面。这样其实span就完全变成了div。
2、进一步解决span宽度方案
然后我们再增加一个css属性float，这样的确在某种条件下能解决问题。
span {
background-color:#fc0;
display:block;
float:left;
width:150px;
}
3、完美的解决span宽度方案
<!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:#fc0;
display:-moz-inline-box;
display:inline-block;
width:150px;
}
</style>
</head>
<body>
HCONLY视觉网站设计<span>width</span>营销策划
</body>
</html>
喜欢
0
赠金笔