最近在做點關(guān)于數(shù)據(jù)表格的修改工作，如下所示：

上圖中使用了EasyUi中的 datagrid 控件，很多情況下需要實現(xiàn)用戶單擊或者雙擊某一行，彈出某一行信息的效果，如下圖所示：

彈框中的每一個信息input框都有個span標(biāo)簽來做個信息展示，通常情況下，信息的字?jǐn)?shù)個數(shù)不一樣，所以就產(chǎn)生了如下問題：字?jǐn)?shù)不一致的時候的對齊問題。如圖中所示：通過設(shè)置span標(biāo)記的width屬性不起作用。

然后，會有一些方法來解決這個問題，比如：span標(biāo)記外層放一個div標(biāo)簽，通過div標(biāo)簽的width屬性來控制span內(nèi)容的顯示位置；也可以設(shè)置span標(biāo)記的float屬性來設(shè)置（float后會產(chǎn)生其他問題，不推薦使用）；

查找資料后，找到個辦法：通過設(shè)置span標(biāo)記的{display:inline-block},如下圖所示：

這么設(shè)置后，span標(biāo)記的width屬性就生效了。

PS：在網(wǎng)上查了些資料，據(jù)說是瀏覽器對 inline 和 block 的支持不一樣，可查看鏈接http://blog.csdn.net/nuptsv_ice/article/details/10394541

轉(zhuǎn)載于:https://www.cnblogs.com/maxiaoshuai/p/5580514.html

總結(jié)

以上是生活随笔為你收集整理的span 标记 width 设置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。