登录 注册

思源如何在一行插入复选框？

本贴最后更新于 941 天前，其中的信息可能已经东海扬尘

image.png

就是图中这个效果，

试了半天，没找到怎么弄

  • 思源笔记

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

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

    25118 引用 • 103562 回帖 • 1 关注
  • Q&A

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

    9582 引用 • 43587 回帖 • 97 关注
20 悬赏
22 回帖
9
5
4
3
2.0k 222 229 664 62 36 2 797

相关帖子

22 回帖
思源如何在一行插入复选框？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • yuyuyuyu • • 2 评论
    付费者 作者

    我是不是使用步骤错了 😭

    我复制了你那个超级块模板，然后再 theme.css 中粘贴了代码

    但是在文档里面导入模板以后，超级块的间距没有发生什么变化。

    换成 daylight 也没效果
    yuyuyuyu •
    @yuyuyuyu 你换成 dalight 主题之后,那个 css 片段也要复制到 daylight 的 theme.css 里; 如果你用其他主题,你得把那个 css 片段复制到 theme.css 的尾部
    cyanc •
  • 其他回帖
  • yuyuyuyu •
    付费者 作者
  • wlcycxy • via Linux
    订阅者

    image.png复选框难道还有什么其它效果，至于删除线，与所用的主题有关吧。

  • cyanc • • 2 • 2 赞同
    付费者 捐赠者

    参考 @wlcycxy 超级块的思路,可以把超级块做成了模板, 搭配 css 让每个复选框之间更加紧凑

    演示:

    模板

    {{{col
* {: id="20220920095813-mnroifl"}[ ] 
  {: id="20220920095813-6qadorw"}
{: id="20220920095813-m2vnvgn"}

* {: id="20220920095813-xzqsayz"}[ ] 
  {: id="20220920095813-brru2fz"}
{: id="20220920095813-lwbtqzi"}

}}}
{: style="text-align: left;" id="20220920095813-dc6019s"}

​

    保存为 \SiYuan\data\templates\复选框 fxk.md

    css

    /* ----------------------------------------------超级块内水平复选框紧凑设置*/
/*这里使用has来限制父元素,has()需要chrome v105+才支持,electron v21版本*/

/*下面几个margin用来调整超级快的高度,使其变小*/
/*超级块自适应宽度,而不是整个文档宽度*/
div.sb[data-type="NodeSuperBlock"][data-sb-layout="col"] {
	width: fit-content;
	margin: 0px;
}
/*每个复现框内文本不wrap*/
div.sb[data-type="NodeSuperBlock"][data-sb-layout="col"]>div.list[data-type="NodeList"][data-subtype="t"]>div.li[data-type="NodeListItem"][data-subtype="t"]>div.p {
    width: max-content;
	margin: 0px;
}
/*超级块里面段落块的文本不wrap*/
div.sb[data-type="NodeSuperBlock"][data-sb-layout="col"]>div.p>div[contenteditable="true"] {
    width: max-content;
}
/*复选框往右移动,防止其左边菜单和左边的复选框overlap*/
div.sb[data-type="NodeSuperBlock"][data-sb-layout="col"]>div.list[data-type="NodeList"][data-subtype="t"] {
	padding-left: 15px;
	margin: 0px;
}
​

    添加到

    \SiYuan\conf\appearance\themes\daylight2\theme.css 的尾部

    daylight2 改成你的主题名

    \SiYuan 是思源工作空间路径

    4 回复
    3 操作
    cyanc 在 2022-09-22 08:20:05 更新了该回帖
    cyanc 在 2022-09-21 22:14:39 更新了该回帖
    cyanc 在 2022-09-21 12:35:28 更新了该回帖
  • 查看全部回帖
yuyuyuyu
回帖
409
 帖子
144
 积分
120

近期热议

推荐标签 标签

  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 5 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖 • 9 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 742 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 55 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 32 关注
  • 房星科技

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

    6 引用 • 141 回帖 • 593 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    494 引用 • 928 回帖 • 2 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 442 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    31 引用 • 97 回帖
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 7 关注
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    96 引用 • 155 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    66 引用 • 114 回帖 • 194 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 383 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 72 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 724 关注
  • webpack

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

    42 引用 • 130 回帖 • 247 关注
  • Markdown

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

    170 引用 • 1529 回帖
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖 • 2 关注
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 653 关注
  • Word
    13 引用 • 40 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 366 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖
  • etcd

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

    6 引用 • 26 回帖 • 544 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖

最新标签