时间戳

首页 > 解决方案 > 如何保持列表内容与其在html中的编号之间的单独对齐，将列表样式位置保持在内部？

javascript - 如何保持列表内容与其在html中的编号之间的单独对齐，将列表样式位置保持在内部？

问题描述

我有以下列表及其样式

ol {
  background: #ff9999;
  padding: 20px;
  list-style-position: inside;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
}

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

我正在尝试将所有列表编号保留在列表项中，以便数字应与所有编号保持左对齐，问题是由于此文本现在已包装并且与列表项编号对齐，我想要该文本应该与自身对齐，而不是与数字对齐。怎么做 ？

以下是截图，可以看到文本过长时没有对齐 在此处输入图像描述

标签： javascripthtmlcssstylesheet

解决方案

这个 CSS 可以正常工作：

ol {
    border: solid 20px #ff9999;
    background: #ffe5e5;
    padding: 10px;
    list-style: none;
    counter-reset: count;
}

ol li {
    padding: 5px;
    counter-increment: section;
    display: flex;
}

ol li:before {
    content: counter(section) ".";
    min-width: 30px;
}
<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis facilis mollitia delectus nostrum illum. Ratione a autem, officiis ipsum tempore non ab consectetur illum commodi vitae quas. Beatae sit qui, officia sapiente debitis neque veniam deleniti amet officiis minus ipsam doloremque dignissimos aliquid commodi sequi, nulla ullam molestias voluptate natus.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Libero, facere ex voluptatem aspernatur!</li>
    <li>Quis magnam, voluptates error sunt.</li>
    <li>Nesciunt dolor, deleniti repudiandae iusto?</li>
    <li>Dolorem ea alias, sapiente hic!</li>
    <li>Rem sit, error ex? Maxime.</li>
    <li>Itaque commodi odit maxime pariatur.</li>
    <li>Aliquid odio cum vitae animi!</li>
    <li>Ipsa, ex! Ullam, ipsa, laboriosam?</li>
    <li>Culpa nemo illum, deleniti itaque.</li>
    <li>Velit similique incidunt placeat ducimus!</li>
    <li>Sit vel perspiciatis, voluptas itaque.</li>
</ol>

推荐阅读