【几乎解决】无序列表圆点对齐/优化问题

疑问解答
1

一个关于无序列表bullet对齐的问题，涉及CSS

  • 如图，这是我在editing模式下定位的element style，就是图二红框里的东西，把里面的disiplay: inline-flex; 改为inline-gird就会好看很多
    Snipaste_2023-03-28_23-19-17
    Snipaste_2023-03-28_23-20-10
    Snipaste_2023-03-28_23-20-10555×728 33.3 KB
  • 可是问题来了，首先，我在theme.css里面找不到和这个.list-bullet对应的代码段
  • 其次，如图：我直接复制了.list-bullet 里面的代码，把display改了，可是重启ob后没有变化，也就是说，没用
    Snipaste_2023-03-28_23-25-21

希望得到各位大佬的指点

另：主题是blue topaz，win7

2023.4.1更新

关于无序列表子弹点的优化：

  • 在theme.css里（用VS code）找到关于list-bullet代码段，后修改display为inline-grid，但需要注意：①代码段应不区分::before与::after ，以便使渲染模式和编辑模式同步修改②此方法是为了让子弹点和文字更靠近
  • 在相同的css片段里，加入translate:0 -？px（“？”指的是具体的数字，需要根据个人情况调整，这里只给出blue topaz主题的数据：-2.4px），需要注意：此方法为了让子弹点对齐/居中

关于勾选框的优化

如有错误或更优解，敬请斧正，欢迎讨论

2
  • 首先，我在theme.css里面找不到和这个.list-bullet对应的代码段

我理解这代码在 Obsidian 自带的 Obsidian theme variables 里,
可从 “控制台 app.css” 里看到, 形如

.list-bullet {
  /* hide bullet when editing the marker */
  color: transparent;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.list-bullet:before {
  content: '\200B';
}
...
  • 直接复制了.list-bullet 里面的代码，把display改了，可是重启ob后没有变化，也就是说，没用

可能仍然是因为 Obsidian theme variables, 这里有大量权重高于选择器 .list-bullet 的规则, 即形如 xxxx > yyyy > .list-bullet 的规则, 导致你把 .list-bullet 的 display 设了也没用
加上 !important 试试?

1 个赞
3

好消息

  • 在你的提醒下，我在theme.css里面找到了关于list-bullet渲染有关的代码段，在初步尝试修改display后，成功实现了我想要的外观

话不多说，上图：
Snipaste_2023-03-29_22-17-11

在blue topaz的theme.css里面，找到了它，然后：

Snipaste_2023-03-29_22-17-53

复制到自己的css里面后，直接进行修改（忽略上面那段无用的代码……）
更正一个错误：上面红框代码里的 .list-bullet::before ,应该改为 .list-bullet （也就是去掉::before），否则改动后在编辑模式下会出现令人崩溃的画面QAQ

最后:

Snipaste_2023-03-29_22-18-12

在渲染下初步实现了我的需求（强迫症），后续看看是否可以将那个圆点在行内对齐

欢迎讨论

4

是想在 编辑/阅读视图 精细调整列表圆点的位置?
请教一下, 从 display: inline-flex 改成 display: inline-grid 有啥提升? css 现代布局我不太熟悉, 感觉在这场景从 flex 改 grid 也没啥用呀

查了下 Blue Topaz “阅读视图” 里这圆点的位置, 除了弹性盒子, 还看到了 float, 这有点复杂我再学习一下…

5

其实flex改成grid也仅仅是把圆点的位置调正一点，靠近一点文字……
当然，这里仅仅是提供一个优化无序列表外观的思路，各位有更好的思路可以一起讨论讨论

6

用transform:translateY(-4px)或者translate: 0 -4px

7
  • 非常感谢您的建议！我用了translate：0 -2.4px很好的解决了当前无序列表子弹点的对齐问题！
  • 上图：
    • 改动前：
      Snipaste_2023-04-01_19-47-11
      即使在console里面list目录下有各种各样的定义center，但很明显，这个点并不center
    • 改动后：
      Snipaste_2023-04-01_19-52-09
      对齐的还算不错，略微有点靠上，这是为了平衡一下编辑模式和渲染模式下圆点的位置（因为如果渲染模式下完全居中的话，编辑模式下会偏的比较厉害）

下面是css：

Snipaste_2023-04-01_20-27-03
Snipaste_2023-04-01_20-27-031360×610 181 KB

注：上面的是优化无序列表的，下面的是优化task list 勾选框的（尤其指blue topaz主题的圆形勾选框的位置优化）

8

margin: auto 0可能也行，通用性更好一些

9

margin我也试过了，不过是：margin: 0 auto ，但是改过后好像没有变化……我再尝试一下

改动前：
Snipaste_2023-04-01_21-02-47
改动后：
Snipaste_2023-04-01_21-02-33

泪目

10

line-height也可以试着改改

1 个赞