EasyUI toolbar分隔线

问题描述:EasyUI toolbar中添加分隔线时,分隔线会自动跑到最左边。

解决方案一:
使用一个table来创建toolbar,

<div id="toolbar">
    <table>
        <tr>
            <td>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onClick="javascript:add();">添加</a>
            </td>
            <td>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onClick="javascript:upd();">修改</a>
            </td>
        </tr>
    </table>
</div>

解决方案二:
改变分隔线样式,

<div id="toolbar">
    <div>
         <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onClick="javascript:add();">添加</a>
         <span class="datagrid-btn-separator" style="vertical-align: middle;display:inline-block;float:none"></span>
         <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onClick="javascript:upd();">修改</a>
    </div>
</div>

比较:工具栏工具按钮较多,而窗口又较小时,方案二较好(因为它会分行显示)。

猜你喜欢

转载自blog.csdn.net/yiluxiangqian7715/article/details/52755829