html - 如何正确标记/设置有序列表的样式以补偿大元素编号

Question

我正在动态生成一个包含有序列表的网页。该页面包含 10 个元素，并使用属性“开始”对元素进行相应编号。具有“list-style-position: outside”的通用有序列表非常适合元素编号小于 1000 的元素。

当元素编号长度为 4 位或更多位时，部分元素编号被容器边框部分遮挡时会出现问题。调整列表填充并不是一个真正的解决方案，因为它仍然会破坏位数大于调整填充以处理的位数的元素计数，并且由于过多的填充会使个位数元素看起来很糟糕。

使用 'list-style-position: inside' 解决了元素编号被遮挡的问题，但引入了一个新问题，因为这样做会导致元素内容包裹在列表元素编号下方，而不是对齐到数。

我总是可以隐藏元素编号并在每个

中引入一个新的 float div 并将内容设置为列表元素编号，但是虽然这解决了我的演示问题，但在语义上它不太正确，因为我正在添加标记和内容纯粹出于展示原因。

有没有我不知道的解决这个难题的 css 解决方案？

    <style>
        #container {
            border: solid;
        }

        #container div, #container h1 {
            border: solid 1px blue;
        }

        #outsideOl {
            list-style-position: outside;
        }

        #insideOl {
            list-style-position: inside;
            padding-left: 0;
        }

    </style>



    <div id="container">

    <ol id="outsideOl" start="3000">
        <li><h1>one</h1><div>the content inside the &lt;li&gt; is aligned to the right of the numbers, which is what I want, but long numbers are obscured by the container's border.  The list elements are shifted to the right by the default padding for an &lt;ol&gt; element.  If the list item number happens to be longer than the padding, part of the number is obscured.</div></li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
    </ol>

    <hr/>

    <ol id="insideOl" start="3007">
        <li><h1>one</h1><div>long numbers affect content flow and as such are left aligned to the container border (which is good because they are no longer obscured). The problmen now is the block content inside the li gets bumped down to the next line, and left aligns with the numbers. Curse you css!</div></li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
    </ol>

    </div>

Answer 1

您想要的行为是什么？您可以设置溢出的可见性，以便非常大的数字突出到边距中。如果您希望数字列的宽度实际根据列表项的数量而改变，您将需要使用 JS。很遗憾，但它应该只有一行(类似于 $('ul').each(function(el, index){el.css('padding-left',(Math.floor(Math.log (el.childNodes.length)/Math.LN10)+1)+'em');});)