编辑区右键菜单图标横排与精简

经验分享
1

就像这样
2026-02-04_10-36-14
gemini写的

/* 1. 定位剪切板功能组并开启横向排列 */
.menu-scroll:has([data-section="clipboard"]) {
    display: flex;
    flex-direction: column;
}

/* 2. 找到 clipboard 组的容器并设置为行内显示 */
.menu-group:has([data-section="clipboard"]) {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    gap: 2px;
}

/* 3. 隐藏标题，只保留图标 */
.menu-item[data-section="clipboard"] .menu-item-title {
    display: none;
}

/* 4. 调整图标大小和内边距，使其紧凑 */
.menu-item[data-section="clipboard"] {
    width: auto;
    padding: 8px;
    justify-content: center;
}

/* 5. 确保其他组（如“新增链接”、“添加命令”）保持正常的整行显示 */
.menu-group:not(:has([data-section="clipboard"])) .menu-item {
    width: 100%;
    display: flex;
}
1 个赞
2

2026-02-04_10-42-33
最上面的两个链接也横排了

/* 1. 定位链接组与剪切板组并开启横向排列 */
.menu-group:has([data-section="selection-link"]),
.menu-group:has([data-section="clipboard"]) {
    display: flex;
    flex-wrap: wrap;
    padding: 4px;
    gap: 2px;
}

/* 2. 隐藏这两个组内的文字标题 */
.menu-item[data-section="selection-link"] .menu-item-title,
.menu-item[data-section="clipboard"] .menu-item-title {
    display: none;
}

/* 3. 统一调整图标条目的外观，使其居中且紧凑 */
.menu-item[data-section="selection-link"],
.menu-item[data-section="clipboard"] {
    width: auto;
    padding: 8px;
    justify-content: center;
}

/* 4. 确保其他组（如文本格式、段落设置、添加命令）保持正常宽度显示 */
.menu-group:not(:has([data-section="selection-link"])):not(:has([data-section="clipboard"])) .menu-item {
    width: 100%;
}

/* 5. 额外修正：确保全选图标等特殊项在横排中不会变形 */
.menu-item[data-section="clipboard"] .menu-item-icon {
    margin-right: 0;
}
2 个赞
3

感谢楼主分享，简洁好用

这些界面细节其实很能改善新人的体验，官方如果也预置到主题内会好很多

4

用上了，好用！感谢

5

挺好，链一下相关论坛历史。右键编辑菜单优化 - #33，来自 七又四分之一

6

image

增加了悬停时，显示文字说明
前端小白，有不对的地方还请大佬指点。

/* 悬停时显示文字标题 */
.menu-item[data-section="selection-link"]:hover .menu-item-title,
.menu-item[data-section="clipboard"]:hover .menu-item-title {
    display: block;
    position: fixed;
    margin-top: 50px;
    font-size: 80%;
    opacity: 0.5;
}
1 个赞