如何使用 CSS 正确设置嵌套列表的垂直间距？

问题描述 投票：0回答：1
当旨在使其在各种场景中工作时，在 CSS 中管理

嵌套列表的垂直间距可能具有挑战性。在实验过程中，我发现了一些潜在的解决方案，但我不确定我的方法是否有效涵盖所有边缘情况。经过一番研究后，我找不到一种好的、通用的、标准化的方法来以“最佳实践”的方式实现这样的事情。 目标

目标

是定义一个解决方案：

    避免
  • line-height

    ：虽然

    line-height
    经常用于控制间距，但它不理想
    ，至少在这种情况下是这样，因为它会影响列表项中多行文本的间距。无论列表项之间的间距如何，行高
    应该保持一致以提高可读性。

    • 处理所有情况
  • ：解决方案应考虑可以深度嵌套的列表，以及各级

    <ul> 和 <ol>

     元素的任意组合。作为奖励，它还应该处理兄弟列表，我认为这是一个常见且有效的用例。
    • 更喜欢现代CSS
  • ：首选简洁高效的解决方案，利用现代CSS选择器和技术来减少冗余并提高可维护性。
    



    

    • 示例和潜在解决方案


这是我想出的 CSS 解决方案：


li:not(:last-of-type) {
  margin-block-end: 1em;
}

:is(ul, ol) + :is(ul, ol),
li :is(ul, ol) {
  margin-block-start: 1em;
}





第一条规则在同级列表项之间添加
    垂直间距
  1. ，同时避免列表中最后一个项目之后不必要的间距（也是为了防止边距折叠）。
    


    第二条规则引入了
    2. 列表的垂直间距
  2. ，无论它们是
    兄弟姐妹还是列表项的子项（嵌套）。
:is(ul, ol) 伪类选择器确保规则一致地应用于无序 (
    <ul>
    ) 和有序 (
    <ol>
    ) 列表。
    

    





li:not(:last-of-type) {
  margin-block-end: 1.5em;
}

:is(ul, ol) + :is(ul, ol),
li :is(ul, ol) {
  margin-block-start: 1.5em;
}

/**
 * for visual representation only
 * 1: adjust horizontal spacing to align markers more appealingly
 * 2: normalize line height to make the spacing in the example more noticeable
 */
:is(ul, ol) {
  padding-inline-start: 2ch;
  line-height: 1; /* 2 */
}


<ul>
  <li>
    List 1 - Item 1
  </li>
  <li>
    List 1 - Item 2
    <ul>
      <li>
        List 1 - Item 2.1
      </li>
      <li>
        List 1 - Item 2.2
        <ul>
          <li>
            List 1 - Item 2.2.1
            <ol>
              <li>
                List 1 - Item 2.3.1
              </li>
              <li>
                List 1 - Item 2.3.2
              </li>
              <li>
                List 1 - Item 2.3.3
                <ul>
                  <li>
                    List 1 - Item 2.4.1
                  </li>
                  <li>
                    List 1 - Item 2.4.2
                    <ol>
                      <li>
                        List 1 - Item 2.5.1
                      </li>
                    </ol>
                  </li>
                </ul>
              </li>
              <li>
                List 1 - Item 2.3.4
              </li>
            </ol>
          </li>
          <li>
            List 1 - Item 2.2.2
          </li>
        </ul>
      </li>
      <li>
        List 1 - Item 2.3
      </li>
    </ul>
  </li>
  <li>
    List 1 - Item 3
    <ol>
      <li>
        List 1 - Item 3.1
      </li>
    </ol>
  </li>
  <li>
    List 1 - Item 4
  </li>
</ul>

<ul>
  <li>
    List 2 - Item 1
    <ol>
      <li>
        List 2 - Item 1.1
      </li>
      <li>
        List 2 - Item 1.2
      </li>
    </ol>
    <ol>
      <li>
        List 2.1 - Item 1.1
      </li>
    </ol>
  </li>
  <li>
    List 2 - Item 2
  </li>
  <li>
    List 2 - Item 3
  </li>
</ul>
<ol>
  <li>
    List 3 - Item 1
  </li>
  <li>
    List 3 - Item 2
  </li>
</ol>






问题和注意事项


我想知道是否：




这种方法可以处理
    所有
  • （边缘）情况，例如混合类型列表或不寻常但有效的嵌套结构？提供的示例中是否缺少这种情况？
    


    有更稳健、更高效和更广泛使用的替代方法或改进吗？
    • 

  • 

    是否需要一个标准化的“list-spacing”属性，并应向 CSS 工作组提出建议？
    • 

  • 

    

    反馈、改进我的解决方案的建议，或者基于目标的更好的解决方案将受到高度赞赏，特别是对边缘案例和管理 CSS 中列表间距的现代最佳实践的见解。
    • 
    

	


答案


html

css

html-lists

nested-lists


1个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        
此方法是否可以处理所有情况（包括边缘情况），例如混合类型列表或不常见但有效的嵌套结构？提供的示例中是否缺少这样的情况？

我很确定您的代码已经处理了您指定的所有边缘情况（多行列表项除外）。您可以使用以下代码来测试这些。
<ul>
  <li>
    This is a multiline list item. It is being used to test the functionality of multiline lists. The content here covers multiple lines to test vertical spacing and line height functionality.
  </li>
  <li>
    This is another multiline list item. It is being used to test the functionality of multiline lists. The content here covers multiple lines to test vertical spacing and line height functionality.
  </li>
</ul>





是否有更稳健、更高效、更广泛使用的替代方法或改进？

根据我通过一些研究和浏览 Stack Overflow 上较旧但类似的问题所收集的信息，您现在使用的方法是可靠的。有一个问题，如何设置列表项之间的垂直空间，其答案与您的方法非常相似，但我不确定它们是否适用于所有边缘情况。

您可以优化代码的一个潜在领域是使用以下代码在代码中将 list-spacing
 设为变量。


:root {
  --list-spacing: 1.5em;
}



然后您可以使用 
var(--list-spacing)
 引用该变量。


是否需要向CSS工作组提出标准化的
list-spacing
属性？
虽然我认为当前的解决方案工作得很好，但建议编程语言的潜在更新或功能总没有坏处。我不太熟悉创建和更新编程语言的行为，所以我无法说出添加此功能有多困难，但我认为拥有它肯定会有所帮助。

代码片段


这是一个更新的代码片段，其中包含上述所有建议。






:root {
  --list-spacing: 1.5em;
}

li:not(:last-of-type) {
  margin-block-end: var(--list-spacing);
}

:is(ul, ol)+ :is(ul, ol),
li :is(ul, ol) {
  margin-block-start: var(--list-spacing);
}

/**
 * for visual representation only
 * 1: adjust horizontal spacing to align markers more appealingly
 * 2: normalize line height to make the spacing in the example more noticeable
 */
:is(ul, ol) {
  padding-inline-start: 2ch;
  line-height: 1;
  /* 2 */
}


<ul>
  <li>
    List 1 - Item 1
  </li>
  <li>
    List 1 - Item 2
    <ul>
      <li>
        List 1 - Item 2.1
      </li>
      <li>
        List 1 - Item 2.2
        <ul>
          <li>
            List 1 - Item 2.2.1
            <ol>
              <li>
                List 1 - Item 2.3.1
              </li>
              <li>
                List 1 - Item 2.3.2
              </li>
              <li>
                List 1 - Item 2.3.3
                <ul>
                  <li>
                    List 1 - Item 2.4.1
                  </li>
                  <li>
                    List 1 - Item 2.4.2
                    <ol>
                      <li>
                        List 1 - Item 2.5.1
                      </li>
                    </ol>
                  </li>
                </ul>
              </li>
              <li>
                List 1 - Item 2.3.4
              </li>
            </ol>
          </li>
          <li>
            List 1 - Item 2.2.2
          </li>
        </ul>
      </li>
      <li>
        List 1 - Item 2.3
      </li>
    </ul>
  </li>
  <li>
    List 1 - Item 3
    <ol>
      <li>
        List 1 - Item 3.1
      </li>
    </ol>
  </li>
  <li>
    List 1 - Item 4
  </li>
</ul>

<ul>
  <li>
    List 2 - Item 1
    <ol>
      <li>
        List 2 - Item 1.1
      </li>
      <li>
        List 2 - Item 1.2
      </li>
    </ol>
    <ol>
      <li>
        List 2.1 - Item 1.1
      </li>
    </ol>
  </li>
  <li>
    List 2 - Item 2
  </li>
  <li>
    List 2 - Item 3
  </li>
</ul>
<ol>
  <li>
    List 3 - Item 1
  </li>
  <li>
    List 3 - Item 2
    <ul>
      <li>
        This is a multiline list item. It is being used to test the functionality of multiline lists. The content here covers multiple lines to test vertical spacing and line height functionality.
      </li>
      <li>
        This is another multiline list item. It is being used to test the functionality of multiline lists. The content here covers multiple lines to test vertical spacing and line height functionality.
      </li>
    </ul>
  </li>
</ol>



    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.