登录 注册

调整列表里标题间距的 CSS 代码是哪个啊

本贴最后更新于 246 天前，其中的信息可能已经事过境迁

我找到调整标题字号和间距的 CSS 了（见下）。我是希望字号小一点。

调整字号可以应用于所有地方的标题，

但是调整间距无法应用于列表里的标题：

  • 比如这个三级标题在列表里，下面的代码间距设置无法应用于此标题

找了半天实在是找不到相关的 CSS，求指教……

.protyle-wysiwyg .h1 {
    font-size: 1.35em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h2 {
    font-size: 1.3em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h3 {
    font-size: 1.25em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h4 {
    font-size: 1.2em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h5 {
    font-size: 1.15em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h6 {
    font-size: 1.1em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}
  • 思源笔记

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

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

    22337 引用 • 89381 回帖
7 回帖
4
3
381 81 1 283 14 2

相关帖子

7 回帖
调整列表里标题间距的 CSS 代码是哪个啊

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen •
    付费者 支持者 捐赠者

    帮你加了点东西，试试这个行不行：

    .protyle-wysiwyg .h1,
.protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h1 {
    font-size: 1.35em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h2,
.protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h2 {
    font-size: 1.3em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h3,
.protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h3 {
    font-size: 1.25em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h4,
.protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h4 {
    font-size: 1.2em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h5,
.protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h5 {
    font-size: 1.15em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}

.protyle-wysiwyg .h6,
.protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h6 {
    font-size: 1.1em !important;
    margin-bottom: 2px !important;
    margin-top: 2px !important
}
    1 回复
  • LoneFireBlossom •
    付费者 作者

    谢谢，试了试不行，可以看到进入聚焦和退出后文字间距不一样（截图是 100% 大小）

    image.png

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    你用的是什么主题？我这里聚焦也是同样的

    1 回复
  • LoneFireBlossom •
    付费者 作者

    新开了一个工作空间用这个 CSS，默认主题也是如此

    image.png

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    我没搞懂你那里是怎么回事，我这里可以：

    image.png

    1 回复
  • LoneFireBlossom •
    付费者 作者

    太怪了 😢 我这真的是新建的一个工作空间别的啥都没装啊，就是不一样，我好难受，因为这样聚焦和退出聚焦的视觉效果不同让我不适应……

    CleanShot20240322at12.48.03.gif

    1 回复
  • JeffreyChen • • 1 • 2 评论
    付费者 支持者 捐赠者

    我升级新版之后不知道为什么又可以复现了。我仔细研究了一下，聚焦界面的 CSS 确实跟聚焦前不一样，但我还是没找到能让聚焦前后完全一致的 CSS 片段，只能说尽可能接近。你再额外加上下面这个代码片段应该就差不多了：

    .protyle-wysiwyg [data-node-id].li>.protyle-action~.h1, .protyle-wysiwyg [data-node-id].li>.protyle-action~.h2, .protyle-wysiwyg [data-node-id].li>.protyle-action~.h3, .protyle-wysiwyg [data-node-id].li>.protyle-action~.h4, .protyle-wysiwyg [data-node-id].li>.protyle-action~.h5, .protyle-wysiwyg [data-node-id].li>.protyle-action~.h6 {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h1, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h2, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h3, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h4, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h5, .protyle-wysiwyg [data-node-id].li > .protyle-action ~ .h6 {
    line-height: 31px;
}
    感谢！！！！！
    LoneFireBlossom •
    @LoneFireBlossom 对了，因为这个是按照我的字体大小来调整的，所以如果在你的设备上偏差很大的话，你可能要自己修改一下其中的数值。
    JeffreyChen •
请输入回帖内容 ...
LoneFireBlossom
回帖
58
 帖子
7
 积分
59

近期热议

推荐标签 标签

  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 625 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • abitmean

    有点意思就行了

    • 29 关注
  • Mobi.css

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

    1 引用 • 6 回帖 • 733 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 376 关注
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    209 引用 • 2031 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    167 引用 • 1513 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 261 关注
  • 开源

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

    408 引用 • 3574 回帖
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 633 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 175 关注
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    125 引用 • 169 回帖 • 1 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    351 引用 • 1814 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 43 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 302 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 399 关注
  • CodeMirror
    1 引用 • 2 回帖 • 129 关注
  • BND

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

    107 引用 • 1281 回帖 • 27 关注
  • GraphQL

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

    4 引用 • 3 回帖 • 9 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 531 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 638 关注

最新标签