【已解决】大纲和嵌套标签的对齐问题

疑问解答
1

大纲

如果包含多层标题等级，包含子标题的在大纲显示的时候，前面是有一个折叠箭头图标。这是会导致，对于相同标题等级的内容，在现实的时候，是对不齐的。

对于以下的文档：

### 标题1

### 标题2

#### 标题2-1

#### 标题2-2

### 标题3

大纲显示效果如下：
image

如上图所示，“标题2”和“标题1”就没有对齐，希望在这时候，“标题1”可以往右边移动一下空间，这样会比较美观。

嵌套标签

如果有嵌套标签，也会有类似的问题，如下图所示：
image

我试了好多种主题，大家都没有特别注意这一块。请问是否可以通过CSS可以解决这个问题呢？

2
3

感谢，不过你的格式跟原声主题差别太大，我还是想沿用主题自带的图标和样式。

花了好一会儿，终于研究出来了，来自问自答一下。

下面是嵌套标签的对齐CSS

/* 处理有嵌套标签时的图标对齐 */
.workspace-leaf-content[data-type="tag"] .tree-item-icon {
	position: absolute;
	background: transparent;
	transform: translate(-1px, 3px);
}
.workspace-leaf-content[data-type="tag"] .collapse-icon svg.svg-icon {
	width: 11px;
	height: 11px;
}
.workspace-leaf-content[data-type="tag"] .tree-item-inner {
	margin-left: 12px;
}

下面是大纲的对齐CSS


/* 处理有子标题时的图标对齐 */
.workspace-leaf-content[data-type="outline"] .view-content .outline .tree-item-icon {
	position: absolute;
	background: transparent;
	transform: translate(-2px, -1px);
}
.workspace-leaf-content[data-type="outline"] .view-content .outline .collapse-icon svg.svg-icon {
	width: 11px;
	height: 11px;
}
.workspace-leaf-content[data-type="outline"] .view-content .outline .tree-item-inner {
	margin-left: 10px;
}
.workspace-leaf-content[data-type="outline"] .view-content .outline .tree-item-children {
	margin-left: 10px;
	border-radius: 0px;
}
4 个赞
4

大佬太强了！这个问题也困扰了我蛮久，终于能够解决！感谢！:pray::pray::pray: