Question

我正在动态生成包含有序列表的网页。该页面包含10个项目，并使用属性“start”相应地对项目进行编号。带有'list-style-position：outside'的通用有序列表对于项目编号小于1000的项目非常适用。

当项目编号的长度为4位或更多时出现问题，项目编号的一部分被容器边界部分遮挡。调整列表填充并不是一个真正的解决方案，因为对于具有比填充调整后要处理的更多位数的项目计数，它仍然会中断，以及由于过度填充而使单个数字项看起来很糟糕。

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

我总是可以隐藏项目编号，并在每个＆lt; li＆gt;内部引入一个新的浮动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');});）

Answer 2

也许您可以应用填充和/或marigin，然后使用否定text-indent。我自己从未尝试过这种方法，但除了引入额外的演示标记之外，我只能想到用纯CSS来处理它。

如何正确标记/样式有序列表以补偿大项目编号

2 个答案: