检查清单影响子弹

用户体验
1

当我有一个包含复选框的项目符号列表时，项目符号无法呈现。我不确定这是一个功能还是一个错误。可以肯定的是，它有点难以控制。

1. [] normal numbered item with checkbox
   - normal bullet
    - [] example bulleted checkbox
[] example bulleted item 2
- [] example bulleted item 3
   - [] example bulleted item 4
         - [] example bulleted item 5

得到：

  1. normal numbered item with checkbox
    • normal bullet
    • example bulleted checkbox
      example bulleted item 2
  • example bulleted item 3
    • example bulleted item 4
      - example bulleted item 5
1 个赞
2

这是一个功能，但也许可以改进一些。我可以看到 .has-checkbox 的 CSS，但由于视觉干扰而被故意省略了。

6 个赞
3

我刚试用了正确数量的前导空格。
当然，项目符号仍然缺失，但现在看起来很不错！

1. [] 带有复选框的正常编号项目 A（0 个空格前缀）
    - 正常项目符号 A.1（4 个空格前缀）
      - [] 示例带复选框的项目符号 A.1（4 + 2 = 6 个空格前缀）
    - 正常项目符号 A.2（4 个空格前缀）
      - [] 示例带复选框的项目符号 A.2（4 + 2 = 6 个空格前缀）

注意：此处在不同类型的列表之间添加了换行符

- [] 示例带复选框的项目符号 B（0 个空格前缀）
  - [] 示例带复选框的项目符号 B.1（2 个空格前缀）
    - [] 示例带复选框的项目符号 B.1.1（2 + 2 = 4 个空格前缀）
      - [] 示例带复选框的项目符号 B.1.1.1（2 + 2 + 2 = 6 个空格前缀）
      - [] 示例带复选框的项目符号 B.1.1.2（2 + 2 + 2 = 6 个空格前缀）
    - [] 示例带复选框的项目符号 B.1.2（2 + 2 = 4 个空格前缀）
  - [] 示例带复选框的项目符号 B.2（2 个空格前缀）
    - [] 示例带复选框的项目符号 B.2.1（2 + 2 = 4 个空格前缀）
    - [] 示例带复选框的项目符号 B.2.2（2 + 2 = 4 个空格前缀）
  1. 带有复选框的正常编号项目 A
    • 正常项目符号 A.1
      • 示例带复选框的项目符号 A.1
    • 正常项目符号 A.2
      • 示例带复选框的项目符号 A.2
  • 示例带复选框的项目符号 B
    • 示例带复选框的项目符号 B.1
      • 示例带复选框的项目符号 B.1.1
        • 示例带复选框的项目符号 B.1.1.1
        • 示例带复选框的项目符号 B.1.1.2
      • 示例带复选框的项目符号 B.1.2
    • 示例带复选框的项目符号 B.2
      • 示例带复选框的项目符号 B.2.1
      • 示例带复选框的项目符号 B.2.2
3 个赞
4

如何同时获得项目符号和复选框？您可以通过数字获得，但我想要项目符号。\n\n\n1. []\n 1. []\n - []\n\n1. \n 1. \n - \n\n### 建议\n我希望 [] 在列表中显示为：\n1. 如果不带项目符号指示符使用，则作为项目符号的替代\n \n \n1.\n []\n \n2. 如果带项目符号指示符使用，则作为项目符号 + 复选框\n \n1.\n - []\n \n即项目符号被视为与数字相同

5

真的很高缩进？

  • 列表
    - 测试
    • 测试
    • 测试
  • 测试
- 列表
      - [] 测试
    - [] 测试
  - [] 测试
- [] 测试

这样无法实现项目符号，但会留下一个看起来几乎像项目符号的连字符。

实际上，这里有一个真正的解决方法：

  • 列表
    • ​ 项目 A
      • ​ 项目 A.1
        • ​ 项目 A.1.1
          • ​ 项目 A.1.1.1
    • ​ 项目 B

此示例中的任何 ␆ 都应替换为零宽度空格

- 列表
  - ␆[] 项目 A
    - ␆[] 项目 A.1
      - ␆[] 项目 A.1.1
        - ␆[] 项目 A.1.1.1
  - ␆[] 项目 B

用于测试的零宽度空格复制：

​
3 个赞
6

@Firepup650 发现得很棒！在复选框前面添加任何字符都会使项目符号可见。

  • 列表
    • . 点
      • ' 单引号（如 Excel 中的 无格式文本）
        • | 竖线

对于通用解决方案：将此自定义 CSS 添加到您的 Discourse 实例。

ul li.has-checkbox .list-item-checkbox {
  position: relative;
  left: 0;
}

.cooked ul li.has-checkbox,
.d-editor-preview ul li.has-checkbox {
  position: relative;
  list-style-type: disc;
}

.cooked ul ul li.has-checkbox,
.d-editor-preview ul ul li.has-checkbox {
  list-style-type: circle;
}

.cooked ul ul ul li.has-checkbox,
.d-editor-preview ul ul ul li.has-checkbox {
  list-style-type: square;
}
2 个赞
7

这是一个解决方案，而且有效。但说实话……这让我头疼，因为它强烈地让我想起了 Excel 是如何强制标记文本单元格的 :rofl:

8

所以让我们把它作为一个功能请求：

功能：添加特殊符号以在复选框列表中保留项目符号

如果现在有一个复选框列表，则列表将显示而没有项目符号。

- [] point 1
  - [] point 2
    - [] point 3
      - [] point 4
  • point 1
    • point 2
      • point 3
        • point 4

在复选框前面添加单个引号（例如 Excel 无格式文本）已经禁用了此功能，并且可以看到项目符号，但此外还应删除单个引号。

- '[] point 1
  - '[] point 2
    - '[] point 3
      - '[] point 4
  • ' point 1
    • ' point 2
      • ' point 3
        • ' point 4

<!--
This markdown code:
-->

- '[] point


<!-- should become HTML:  (note: no single quote visible) -->
<ul>
  <li><span class="chcklst-box fa fa-square-o fa-fw"></span> point</li>
</ul>

<!-- instead of this HTML: (note: single quote still visible) -->
<ul>
  <li>'<span class="chcklst-box fa fa-square-o fa-fw"></span> point</li>
</ul>
2 个赞
9

一个更简单的修复/整理方法是，第二个空格（即普通空格，而非零宽度空格）可以指示同时显示项目符号和复选框。

当然，这在编码时可能会很麻烦！