easyui toolbar分隔线

我会带着你远行 2021-07-29 02:57 368阅读 0赞

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

相关 [Android]Toolbar

Toolbar是由AndroidX库提供的，它的强大之处在于，它不仅继承了ActionBar的所有功能，并且灵活度很高，可以配合其他控件完成一些Material Design的

野性酷女/ 2024年03月27日 09:05/ 0 赞/ 31 阅读

相关分隔线集合

\\ 基础分隔线一条黑色实线 \`\`\` html <hr /> \`\`\` \\\ 点线 \`\`\` css /\ 点线 \/ .hr-dotted

你的名字/ 2022年08月30日 08:43/ 0 赞/ 108 阅读

相关分隔线.集

基础分隔线一条黑色实线 <hr /> 效果如下：点线 / 点线 / .hr-dotted { border: 0

太过爱你忘了你带给我的痛/ 2022年08月30日 08:41/ 0 赞/ 117 阅读

相关禁用easyUI中toolbar的按钮

"采菊东篱下,悠然见南山" 在这里记录一下,我昨天遇到的问题,就是给一个easyUI中toolbar的按钮加个权限校验,只有有权限的人才能点击. {

客官°小女子只卖身不卖艺/ 2022年06月09日 08:26/ 0 赞/ 226 阅读

相关 bootstrap 水平分隔线

<ul class="nav nav-list"><li class="divider"></li></ul> ![70][] 这种方法相对来说比较好，宽度适

逃离我推掉我的手/ 2022年05月23日 10:59/ 0 赞/ 164 阅读

相关 RecyclerView系列之添加分隔线

public class MainActivity extends AppCompatActivity { private RecyclerV

青旅半醒/ 2022年02月02日 11:31/ 0 赞/ 187 阅读

相关 HTML_05 —— 分隔线

分隔线 : <hr/> 注意：<hr\\> 是不可以的哦。 <!doctype html> <html> <head> <meta cha

╰半夏微凉°/ 2021年12月13日 17:37/ 0 赞/ 213 阅读

相关 toolbar示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

太过爱你忘了你带给我的痛/ 2021年12月01日 14:54/ 0 赞/ 289 阅读

相关 easyui datagrid表头 toolbar 固定

当用到EasyUI中的 datagrid 时，设置 fit:true, 就会使表头跟toolbar固定，但是这个容器要设置固定的宽和高。 ![format_png][] !

雨点打透心脏的1/2处/ 2021年08月26日 14:02/ 0 赞/ 622 阅读

相关 easyui toolbar分隔线

问题描述：EasyUI toolbar中添加分隔线时，分隔线会自动跑到最左边。解决方案一：使用一个table来创建toolbar <div id="tool

我会带着你远行/ 2021年07月29日 02:57/ 0 赞/ 369 阅读