span 标记 width 设置

最近在做点关于数据表格的修改工作,如下所示:

上图中使用了EasyUi中的 datagrid 控件,很多情况下需要实现用户单击或者双击某一行,弹出某一行信息的效果,如下图所示:

弹框中的每一个信息input框都有个span标签来做个信息展示,通常情况下,信息的字数个数不一样,所以就产生了如下问题:字数不一致的时候的对齐问题。如图中所示:通过设置span标记的width属性不起作用。

然后,会有一些方法来解决这个问题,比如:span标记外层放一个div标签,通过div标签的width属性来控制span内容的显示位置;也可以设置span标记的float属性来设置(float后会产生其他问题,不推荐使用);

查找资料后,找到个办法:通过设置span标记的{display:inline-block},如下图所示:

这么设置后,span标记的width属性就生效了。

PS:在网上查了些资料,据说是浏览器对 inline 和 block 的支持不一样,可查看链接http://blog.csdn.net/nuptsv_ice/article/details/10394541

原文地址:https://www.cnblogs.com/maxiaoshuai/p/5580514.html