Как правильно разметить / оформить упорядоченные списки, чтобы компенсировать большие номера элементов

Question

Я динамически генерирую веб-страницу, содержащую упорядоченный список.Страница содержит 10 элементов и использует атрибут start для нумерации элементов соответственно.Общий упорядоченный список с «list-style-position: outside» прекрасно работает для элементов с номером элемента меньше 1000.

Проблема возникает, когда номера элементов имеют длину 4 или более цифр, что является частьюномер элемента частично скрыт границей контейнера.Корректировка заполнения списка на самом деле не является решением, так как он все еще будет прерываться для количества элементов с большим количеством цифр, чем было отрегулировано для заполнения, а также заставит однозначные элементы выглядеть плохо из-за чрезмерного заполнения.

Использование 'list-style-position: inside' решает проблему затенения номеров элементов, но создает новую проблему, поскольку при этом содержимое элемента переносится под номерами элементов списка вместо выравнивания по правому краю.числа.

Я всегда могу просто скрыть номера элементов и ввести новый плавающий элемент 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, кроме введения дополнительной разметки презентации.