HTML: есть ли способ установить "значение" <li>элементов в строку, а не в число - PullRequest
Новая
       13

HTML: есть ли способ установить "значение" <li>элементов в строку, а не в число

0 голосов
/ 15 июня 2019

Здравствуйте,

Я работаю с некоторыми сложными структурами списков, которые необходимо преобразовать в HTML.Вот моя проблема:

Упорядоченные списки имеют фиксированные значения элементов списка, например: 

1. ...
2. ...
2a. ...
2b. ....

Итак, моей первой идеей было использование «значения» HTML-List-Elements.имущество.Например: 

<ul>
    <li value="2">...</li>
    <li value="2a">...</li>
</ul>

Но поскольку значение-элемента-списка принимает только цифры, оно будет печатать: 

2. ...
2. ...

Есть ли способ получить желаемый результат в пределах <ol> -Элемент?Или я должен создать свой собственный «список» с плавающей точкой и полями?

РЕДАКТИРОВАТЬ: Чтобы прояснить ситуацию - я не могу редактировать или переформатировать этот список, так как они являются законами.Для примера посмотрите: https://www.gesetze -im-internet.de / stgb / __ 5.html

Я не могу просто использовать вложенный элемент в этом, так как это не такспособ написания закона.

Редактировать 2: Лучшее, что я сейчас придумал, - это дать моим <li> элементам атрибут, такой как data-li-value="2a.", и в моем css сделать что-то вроде: 

[data-li-value]::before {
    content: attr(data-li-value) " ";
    float: left;
    margin-right: 2rem;
    margin-right: .5rem;
    margin-left: -.5rem;
}

При удалении default-list-style-type из элемента li ...

Спасибо за любую идею и помощь!:)

1 Ответ

0 голосов
/ 15 июня 2019

Мне кажется, что это решение работает: 

<!DOCTYPE html>
<html>

<head>
    <title>Custom li item</title>
    <style type="text/css">

        ol {
            /* 
            This may be needed if the first item is not a section item

            counter-increment: counter;
            */
            counter-reset: counter;
            list-style: none;
        }

        .single-item:before {
            counter-increment: counter;
            content: counter(counter) ") ";
        }

        .section {
            counter-increment: counter;
            counter-reset: section
        }

        .section-item:before {
            counter-increment: section;
            content: counter(counter) counter(section, lower-alpha) ") ";
        }

    </style>
</head>

<body>
    <ol>
        <li class="section-item section">Part 1a</li>
        <li class="section-item">Part 1b</li>
        <li class="single-item">Part 2</li>
        <li class="single-item">Part 3</li>
        <li class="section-item section">Part 4a</li>
    </ol>

</body>

</html>

Эти ссылки на счетчики CSS также могут оказаться полезными.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Упорядоченный список (HTML) нижнего альфа с правыми скобками?

...