css定义div里span的宽高不起作用

     最近由于工作需求，自己不得不亲手使用div+css去切页面，但速度和效率还蛮不错，不过今天突然遇到了一个小小的问题，那就是css样式定义div里面span的宽和高后，页面显示出来不是定义的宽和高，他是随文字的变换而变换，那怎么解决这个样式呢，笔者试了些方法，为大家总结下css定义span的方法；

    首先页面中的div如下:
<div class="con_right_title"><span>最新发布的信息</span></div>

然后使用样式定义上面的标签；
.con_right_title{ float:left; width:755px; height:35px; line-height:35px;}
.con_right_title span{width:110px; height:35px; text-align:center; border:1px solid #d1d1d1; }

结果显示出来并不是定义中的宽110px；高35px;而是文字有多宽，他就是多宽，文字有多高，他显示就是多高。

然后上网查了下，有些说法也不对，不过最后在一个blog上看到一个方法，解决如下；
由于span是内联元素，所以不受宽高的限制，那么只有将它定义为盒装元素就可以控制了。
将内联元素定义为盒装元素的方法有两种：

   1.直接使用显示属性display将其定义为盒装元素；
   2.使用浮动属性float将其自动定义为盒装元素；

首先使用第一种方法将上面的.con_right_title span稍做更改即可完成，代码如下；
.con_right_title{ float:left; width:755px; height:35px; line-height:35px;}
.con_right_title span{ display:block; width:110px; height:35px; text-align:center; border:1px solid #d1d1d1; }

实现结果整是定义中的结果，然后再次为大家测试第二种方法，如下；
.con_right_title{ float:left; width:755px; height:35px; line-height:35px;}
.con_right_title span{ float:left; width:110px; height:35px; text-align:center; border:1px solid #d1d1d1; }
结果也是定义中所要求的大小；

来源地址：http://www.18sucai.com/article/268.htm

转载于:https://my.oschina.net/mkh/blog/92915