【代码片段】突出标题

本贴最后更新于 350 天前,其中的信息可能已经物是人非

通过代码片段把 标题 往前挪一点

效果:

a0ba67c4bb8d95b68de19bf2fb875b8.png

a13a2d664ac898395be124bfb9df176.png

代码片段:

/* 左右移动标题位置 CSS片段 */
.b3-typography>.h1,
.protyle-wysiwyg>.h1 {
    margin-left: -35px; /* 负值可以根据需要进行调整 */
}

.b3-typography>.h2,
.b3-typography>.h3,
.b3-typography>.h4,
.b3-typography>.h5,
.b3-typography>.h6,
.protyle-wysiwyg>.h2,
.protyle-wysiwyg>.h3,
.protyle-wysiwyg>.h4,
.protyle-wysiwyg>.h5,
.protyle-wysiwyg>.h6 {
    margin-left: -20px; /* 负值可以根据需要进行调整 */
}

按照我的理解改的,两个月使用下来没有发现 BUG

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22047 引用 • 88010 回帖 • 1 关注
  • 代码
    466 引用 • 631 回帖 • 9 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    7955 引用 • 36396 回帖 • 167 关注
4 操作
JeffreyChen 在 2023-11-22 12:30:05 更新了该帖
JeffreyChen 在 2023-09-15 21:58:10 更新了该帖
JeffreyChen 在 2023-09-15 14:54:54 更新了该帖
JeffreyChen 在 2023-09-15 12:32:54 更新了该帖

相关帖子

被采纳的回答
  • zxhd86 1

    回来测试了一下,列表块没影响,嵌入、超级、引述会有影响:

    图片.png

    改成这样就行了:

    /* 移动标题位置 CSS片段 */
    .b3-typography>.h1,
    .b3-typography>h1,
    .b3-typography>.h2,
    .b3-typography>h2,
    .b3-typography>.h3,
    .b3-typography>h3,
    .b3-typography>.h4,
    .b3-typography>h4,
    .b3-typography>.h5,
    .b3-typography>h5,
    .b3-typography>.h6,
    .b3-typography>h6,
    .protyle-wysiwyg>.h1,
    .protyle-wysiwyg>h1,
    .protyle-wysiwyg>.h2,
    .protyle-wysiwyg>h2,
    .protyle-wysiwyg>.h3,
    .protyle-wysiwyg>h3,
    .protyle-wysiwyg>.h4,
    .protyle-wysiwyg>h4,
    .protyle-wysiwyg>.h5,
    .protyle-wysiwyg>h5,
    .protyle-wysiwyg>.h6,
    .protyle-wysiwyg>h6 {
        margin-left: -20px; /* 负值可以根据需要进行调整 */
    }
    
    

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 这个要求简单到我都怀疑自己是不是看错了需求……

    总之我试着回答吧:

    .protyle-content--transition .protyle-title {
        left: -40px;
    }
    

    这个实际使用可能需要调小一点。

    2 回复
  • 我才刚刚自己写好,就看到你回答了。

    不过这个代码不起作用,移动的是文档标题。

  • 我现在用这个:

    /* 移动标题位置 CSS片段 */
    .b3-typography .h1,
    .b3-typography h1,
    .b3-typography .h2,
    .b3-typography h2,
    .b3-typography .h3,
    .b3-typography h3,
    .b3-typography .h4,
    .b3-typography h4,
    .b3-typography .h5,
    .b3-typography h5,
    .b3-typography .h6,
    .b3-typography h6,
    .protyle-wysiwyg .h1,
    .protyle-wysiwyg h1,
    .protyle-wysiwyg .h2,
    .protyle-wysiwyg h2,
    .protyle-wysiwyg .h3,
    .protyle-wysiwyg h3,
    .protyle-wysiwyg .h4,
    .protyle-wysiwyg h4,
    .protyle-wysiwyg .h5,
    .protyle-wysiwyg h5,
    .protyle-wysiwyg .h6,
    .protyle-wysiwyg h6 {
        margin-left: -20px; /* 负值可以根据需要进行调整 */
    }
    
    1 回复
  • zxhd86 1 评论

    哦,原来你需要的是移动文档内部的小标题啊。

    那你这个 css 写的可能不完备了,思源的列表和其他容器块也能放标题的,这会导致标题跟其他元素重叠。

    只是从 css 中观察得出,没有实际复制使用,如果说的不对一笑而过吧

    暂时没发现问题,不过就算有问题,临时关掉代码片段就好了,还挺好用的
    JeffreyChen
  • zxhd86 1 1 评论

    回来测试了一下,列表块没影响,嵌入、超级、引述会有影响:

    图片.png

    改成这样就行了:

    /* 移动标题位置 CSS片段 */
    .b3-typography>.h1,
    .b3-typography>h1,
    .b3-typography>.h2,
    .b3-typography>h2,
    .b3-typography>.h3,
    .b3-typography>h3,
    .b3-typography>.h4,
    .b3-typography>h4,
    .b3-typography>.h5,
    .b3-typography>h5,
    .b3-typography>.h6,
    .b3-typography>h6,
    .protyle-wysiwyg>.h1,
    .protyle-wysiwyg>h1,
    .protyle-wysiwyg>.h2,
    .protyle-wysiwyg>h2,
    .protyle-wysiwyg>.h3,
    .protyle-wysiwyg>h3,
    .protyle-wysiwyg>.h4,
    .protyle-wysiwyg>h4,
    .protyle-wysiwyg>.h5,
    .protyle-wysiwyg>h5,
    .protyle-wysiwyg>.h6,
    .protyle-wysiwyg>h6 {
        margin-left: -20px; /* 负值可以根据需要进行调整 */
    }
    
    
    另外.protyle-wysiwyg>h6 这种其实是多余的,思源并没有使用<h>标签,不过我懒得删了
    zxhd86 1 赞同
请输入回帖内容 ...
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,而不是 Markdown 文件编辑器; 思源笔记同步教程:ld246.com/article/1692089679062

推荐标签 标签

  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 29 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 490 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    939 引用 • 942 回帖
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 339 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖 • 2 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    406 引用 • 3571 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 2 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 6 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 18 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 618 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 71 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 155 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 585 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 3 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 526 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    176 引用 • 815 回帖
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 53 回帖 • 82 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 8 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 407 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 389 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖