Тип порядка списка html, например подсписок

Как создать html-список с произвольной начальной точкой и порядком, как я бы применил подсписок, как показано в фрагменте ниже (но скрыть номер внешнего списка и проверить выравнивание по умолчанию во внешнем списке).

Результат должен выглядеть так

1.1 Item...
    ...some Text...
1.2 Item
1.3 Item

или

2.1 Item
2.2 Item
    Item...
    ...some Text...
2.3 Item

зависит от отправной точки.

ol {
  counter-reset: section;
  list-style-type: none;
} 
li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

 
  <ol start = "2">
    <li>
      <ol>
        <li>Item<br>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ol>
    </li>
  </ol>

html css

28.04.2024 22:45

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

следующий ответ Алохчи и обновление вашего вопроса о выравнивании текста:

ol {
  list-style-type : none;
  padding         : 0;
  margin-bottom: 1em;
  } 
ol ol {
  padding-left    : 3em;
  } 
ol ol li { 
  text-indent    : -2em; /* the first line "trick" */
  padding-bottom : .4em;
  }
ol ol li::before { 
  content : counters(list-item, '.') ' ';
  }

<ol start = "2">
  <li>
    <ol>
      <li>hello<br>world<br>...more text</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
  <li>
    <ol>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
</ol>

[памятка] -> мой первый ответ

ol {
  counter-reset   : section;
  list-style-type : none;
} 
ol li::before {
  counter-increment : section;
  content           : var(--start) counter(section) ' ';
}

<ol style = "--start: '2.';">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

третий:

ol {
  list-style-type : none;
  padding         : 0 0 0 3em;
  
  & > li { 
    text-indent    : -2em;
    padding-bottom : .5em;
    }
    
  & > li::before { 
    content : var(--prefix) counter(list-item) ' ';
    }  
  }

<ol style = "--prefix: '2.';">
  <li>hello<br>world<br>...more text</li>
  <li>Item</li>
  <li>Item</li>
</ol>

четвертый (и, надеюсь, последний):

ol {
  list-style-type : none;
  padding         : 0;
  counter-reset   : section;

  & > li { 
    display           : flex;
    align-items       : stretch;
    margin-bottom     : .6em;
    counter-increment : section;
    }  
 
  & > li::before { 
    display       : block;
    padding-right : .4em;
    content       : var(--prefix) counter(section);
    }  
  }

<ol style = "--prefix: '2.';">
  <li>hello<br>world<br>...more text</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Почему не ваше первое решение и text-indent : -2em;? На мой взгляд, плоский список удобнее.

— 29.04.2024 23:14

@Hölderlin ну, я добавил еще 2... доволен? вы подтвердите мой ответ?

— 30.04.2024 00:03

ИМХО, ваш первый ответ ([memo]) лучше всего с небольшой модификацией, добавив text-indent : -2em; в ol {...} .

— 30.04.2024 00:38

28.04.2024 23:16

Если вы хотите использовать значение атрибута start, вы можете использовать встроенный счетчик «list-item». Так:

ol {
  list-style-type: none;
  margin-bottom: 1em;
} 

ol ol li::before{
  content: counters(list-item, ".") " ";
}

<ol start = "2">
  <li>
    <ol>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
  <li>
    <ol>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
</ol>

28.04.2024 23:33

Другие вопросы по теме

Vue Quill css применяется только к моему первому компоненту Quill Editor + как настроить панель инструментов

Как создать тень на заднем плане с помощью css

Поле ввода расширяется вне поля зрения при фокусировке с помощью CSS-перехода Tailwind

Почему гибкий дочерний элемент не сжимается на этой простой веб-странице тестового примера?

Центрируйте изображение, используя абсолютное положение в React Native

React: как правильно отображать строки таблицы как компоненты тела таблицы?

Как преобразовать условные классы из clxs в cva?

Как иметь несколько событий одним щелчком мыши в JavaScript

Как здесь работает `text-overflow: ellipsis`, если необходимые условия не выполняются?

Пользовательская окраска компонентов с помощью Tailwind в React

Тип порядка списка html, например подсписок

Ответы 2

Другие вопросы по теме

Похожие вопросы