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.youkuaiyun.com/nuptsv_ice/article/details/10394541

转载于:https://www.cnblogs.com/maxiaoshuai/p/5580514.html