设置span的宽度

时间 2020-01-27

标签设置 span 宽度繁體版

原文原文链接

　　在默认的状况下，利用 css 样式对 span 进行宽度设定是无效，但有时为了某种排版的要求，须要对 span 进行宽度设定，那么如何在 html 中利用 css 样式设定 span 的宽度？css

　　思路：这看上去是个很简单的问题，彷佛用 style 中的 width 属性就能够。html

　　然而经过试验之后发现，不管是在 Firefox 仍是 IE 中都无效。浏览器

　　在 CSS2 的标准中，查阅关于 width 的定义，咱们能够发现，原来 css 中的 width 属性并不老是有效的：若是对象是 inline 对象，width 属性就会被忽略，Firefox 和 IE 都遵循了这个标准。ide

　　一、初步解决 span 宽度方案：修改 span 为 block 类型。测试

　　在 span 的 css 中增长 display 属性，将 span 设置为 block 类型。网站

span { 
    background-color: #fc0; 
    display: block; 
    width: 150px; 
}

　　这样宽度就能够实现了，不过这样作也把先后文字隔在不一样行里面：这样其实至关于把 span 彻底变成了 div。spa

　　二、进一步解决 span 宽度方案设计

　　而后咱们再增长一个 css 属性 float，这样的确在某种条件下能解决问题。xml

span {
    background-color: #fc0;
    display: block;
    float: left;
    width: 150px;
}

　　然而若是 span 前面没有文字，那这样作的确是可行的；可是若是有字，先后文字就会连在一块儿，而 span 跑到了第二行。htm

　　其实，在 html 的各类 element 中，的确有既是 inline，又可以设定宽度的状况存在，例如：button 对象，就能够很好的在文字中间出现，而且设定宽度。

　　能不能让 span 也像 button 那样显示呢？经过 CSS2 标准中 display 的定义和 inline 对象的解释，发现 CSS2 标准的制定者把全部的 element 在是否属于 inline 上作了非此即彼的规定：要么是 inline，要么是 block，没有制定 button 那样既是 inline，又能够像 block 那样设置宽度的属性值。

　　在 CSS2.1 标准草案中 display 的定义中增长了一个叫 inline-block 的属性值，针对的刚好是咱们面对的这种情形。那么再看看各类浏览器的对应状况：

Firefox：经过 display 的文档了解到，inline-block 在将来的 Firefox 3 中会实现。经过 Mozllia 扩展属性参考了解到，在 Firefox 3 之前的版本，例如如今的 Firefox 2 中，能够用 -moz-inline-box 达到一样的效果。

IE：经过 MSDN 中的 display 文档了解到，inline-block 已经实现。实际测试发现 IE 6.0 之后都没问题。

　　三、完美的解决 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: #fc0;
                display: -moz-inline-box;
                display: inline-block;
                width: 150px; 
            }
        </style>
    </head>

    <body>
        HCONLY视觉网站设计<span>width</span>营销策划
    </body>
</html>