easyui toolbar分隔线

最新推荐文章于 2022-05-07 20:24:01 发布

whatday

最新推荐文章于 2022-05-07 20:24:01 发布

阅读量784

点赞数

原文链接：https://blog.csdn.net/whatday/article/details/103208204

版权

问题描述：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>

比较：工具栏工具按钮较多，而窗口又较小时，方案二较好（因为它会分行显示）。