如何无需硬编码值实现outside自定义项目符号列表与页边对齐？

问题描述 #

我现在有个带自定义项目符号（日期格式）的列表，当前效果符合预期——列表项文本换行时不会跑到项目符号下方，项目符号也能和页面其他内容对齐，但实现时用了硬编码的padding-left值：

<ul style="list-style-position:outside;padding-left:86.3167px;">
    <!-- list item -->
</ul>

有没有不用硬编码数值的实现方法？完整示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>My Cool Website</title>
    <style>
         html {
             font-family: sans-serif;
         }
         body {
             margin: 0;
             padding: 0 20px 20px 20px;
             line-height: 1.4em;
             margin-left: auto;
             margin-right: auto;
         }
    </style>
</head>
<body>
    <div>
        <h1>My Cool Website</h1>
    </div>
    <ul style="list-style-position:outside;padding-left:86.3167px;">
        <li style="list-style-type:'2022-04-18 ';">
            <a href="/blog/my-long-blog-post-title-that-spans-two-lines-on-my-blog-site">
            my long blog post title that spans two lines on my blog site</a>
        </li>
    </ul>
</body>
</html>

我试过list-style-position:inside，但会导致换行文本跑到项目符号下方（换行后的文本与项目符号左对齐，而非第一行文本开头），对应的代码：

<ul style="list-style-position:inside;padding-left:0;">
    <!-- list item -->
</ul>

解决方案 #

方案1：伪元素替代自定义项目符号

放弃list-style-type定义符号，改用::before伪元素生成日期，配合inline-block和max-content自动适配宽度，无需硬编码值：

<!DOCTYPE html>
<html>
<head>
    <title>My Cool Website</title>
    <style>
         html {
             font-family: sans-serif;
         }
         body {
             margin: 0;
             padding: 0 20px 20px 20px;
             line-height: 1.4em;
             margin-left: auto;
             margin-right: auto;
         }
         /* 重置ul默认样式 */
         ul.custom-date-list {
             list-style: none;
             padding-left: 0;
         }
         /* 生成日期项目符号 */
         ul.custom-date-list li::before {
             content: '2022-04-18 ';
             display: inline-block;
             width: max-content; /* 自动适配日期宽度 */
             margin-right: 0.5em; /* 符号与文本间距 */
         }
    </style>
</head>
<body>
    <div>
        <h1>My Cool Website</h1>
    </div>
    <ul class="custom-date-list">
        <li>
            <a href="/blog/my-long-blog-post-title-that-spans-two-lines-on-my-blog-site">
            my long blog post title that spans two lines on my blog site</a>
        </li>
    </ul>
</body>
</html>

优势：完全自适应符号宽度，文本换行自动对齐第一行开头，项目符号与页面内容自然对齐。

方案2：CSS Grid布局

若想保留list-style-type，可通过Grid将符号与文本拆分为两列，自动分配空间：

<!DOCTYPE html>
<html>
<head>
    <title>My Cool Website</title>
    <style>
         html {
             font-family: sans-serif;
         }
         body {
             margin: 0;
             padding: 0 20px 20px 20px;
             line-height: 1.4em;
             margin-left: auto;
             margin-right: auto;
         }
         ul.custom-grid-list {
             list-style-position: outside;
             padding-left: 0;
             display: grid;
             grid-template-columns: max-content 1fr; /* 符号列自适应，文本列占剩余空间 */
             gap: 0.5em;
         }
         /* 让列表内容占据第二列 */
         ul.custom-grid-list li > * {
             grid-column: 2;
         }
    </style>
</head>
<body>
    <div>
        <h1>My Cool Website</h1>
    </div>
    <ul class="custom-grid-list">
        <li style="list-style-type:'2022-04-18 ';">
            <a href="/blog/my-long-blog-post-title-that-spans-two-lines-on-my-blog-site">
            my long blog post title that spans two lines on my blog site</a>
        </li>
    </ul>
</body>
</html>

优势：保留原生列表语义，无需修改符号定义方式，同样实现无硬编码的自适应布局。

内容的提问来源于stack exchange，提问作者Luciano