自定义块设置缩进后影响代码块第一行了

本贴最后更新于 247 天前,其中的信息可能已经事过景迁

image.png

以下是 css 片段,求大佬告知问题

[custom-zdy="embedded"] { font-family: "汉仪空山楷"; border-radius: 5px; border: 5px red solid !import; min-width: 5rem; color: white; text-indent: 16px; margin: 0 !import; /* 确保整个 box 没有外边距 */ padding: 0 !import; /* 确保整个 box 没有内边距 */ } [custom-zdy="embedded-title"]{ color: #04D9FF; /* 字体颜色 */ font-size: 18px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ text-indent: 16px; /* 首行缩进: 像素px、字体大小em*/ padding: 0.7rem 1rem 0.5rem 1rem; margin: 0; /* 确保标题部分没有外边距 */ } [custom-zdy="embedded-content"]{ color: white; /* 字体颜色 */ padding: 0 1rem 0 1rem; line-height: 1.5rem; font-size: smaller; font-weight: thin; margin: 0; /* 确保内容部分没有外边距 */ }
  • 思源笔记

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

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

    26050 引用 • 108148 回帖
  • Q&A

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

    10005 引用 • 45482 回帖 • 73 关注

相关帖子

被采纳的回答
  • wilsons 1

    添加下这个样式即可

    [custom-zdy="embedded"] .code-block { text-indent: initial; }

    image.png

    完整代码如下

    [custom-zdy="embedded"] { font-family: "汉仪空山楷"; border-radius: 5px; border: 5px red solid !import; min-width: 5rem; color: black; text-indent: 16px; margin: 0 !import; /* 确保整个 box 没有外边距 */ padding: 0 !import; /* 确保整个 box 没有内边距 */ } [custom-zdy="embedded"] .code-block { text-indent: initial; } [custom-zdy="embedded-title"]{ color: #04D9FF; /* 字体颜色 */ font-size: 18px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ text-indent: 16px; /* 首行缩进: 像素px、字体大小em*/ padding: 0.7rem 1rem 0.5rem 1rem; margin: 0; /* 确保标题部分没有外边距 */ } [custom-zdy="embedded-content"]{ color: white; /* 字体颜色 */ padding: 0 1rem 0 1rem; line-height: 1.5rem; font-size: smaller; font-weight: thin; margin: 0; /* 确保内容部分没有外边距 */ }

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 把这个代码块的文档导出为 .sy.zip 上传一下看看

    1 回复
  • 这要看你的具体需求,如果仅仅单纯的排除代码块,前两个样式的选择符改为

    [custom-zdy="embedded"]:not(.code-block) 和 [custom-zdy="embedded-title"]:not(.code-block)

    即可。

    但我想你的本意应该是仅让段落块缩进,那么可以把前两个样式的选择符加上段落块类型加以限制

    比如:

    [data-type="NodeParagraph"][custom-zdy="embedded"] 和 [data-type="NodeParagraph"][custom-zdy="embedded-title"]

    总之,具体怎么改看你的具体需求,如果以上不能满足,你就要说明你需要具体哪些块添加自定义的样式。

    1 回复
  • shiyuankill 1 评论

    embedded.sy.zip,您好,是这个

    2 回复
    @wilsons 看看
    JeffreyChen
  • shiyuankill

    image.png
    大佬,这样好像并没效果

  • text-indent: 16px; 去掉

    1 回复
  • shiyuankill

    image.png1 去掉后不对齐了,

  • wilsons 1

    添加下这个样式即可

    [custom-zdy="embedded"] .code-block { text-indent: initial; }

    image.png

    完整代码如下

    [custom-zdy="embedded"] { font-family: "汉仪空山楷"; border-radius: 5px; border: 5px red solid !import; min-width: 5rem; color: black; text-indent: 16px; margin: 0 !import; /* 确保整个 box 没有外边距 */ padding: 0 !import; /* 确保整个 box 没有内边距 */ } [custom-zdy="embedded"] .code-block { text-indent: initial; } [custom-zdy="embedded-title"]{ color: #04D9FF; /* 字体颜色 */ font-size: 18px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ text-indent: 16px; /* 首行缩进: 像素px、字体大小em*/ padding: 0.7rem 1rem 0.5rem 1rem; margin: 0; /* 确保标题部分没有外边距 */ } [custom-zdy="embedded-content"]{ color: white; /* 字体颜色 */ padding: 0 1rem 0 1rem; line-height: 1.5rem; font-size: smaller; font-weight: thin; margin: 0; /* 确保内容部分没有外边距 */ }
请输入回帖内容 ...

推荐标签 标签

  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖 • 2 关注
  • GitHub

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

    209 引用 • 2040 回帖
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖
  • CloudFoundry

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

    5 引用 • 18 回帖 • 190 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 1 关注
  • 自由行
    4 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 616 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 737 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖 • 2 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 143 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 644 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖
  • OpenCV
    15 引用 • 36 回帖 • 7 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    82 引用 • 411 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖 • 2 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 33 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 706 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 490 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 645 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    172 引用 • 534 回帖
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    300 引用 • 767 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    500 引用 • 1395 回帖 • 243 关注