ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автонумерация многоуровневого списка
12 сообщений из 12, страница 1 из 1
Автонумерация многоуровневого списка
    #39146873
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Есть страница с такой структурой:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<div class="section">
  <div class="title">Раздел 1</div>
  <ol>
    <li><div class="item">пункт 1.1</div></li>
    <li>
      <div class="item">пункт 1.2</div>
      <ol>
        <li><div class="item">пункт 1.2.1</div></li>
        <li><div class="item">пункт 1.2.2</div></li>
      </ol>
    </li>
    <li><div class="item">пункт 1.3</div></li>
  </ol>
</div>



Хочу сделать автоматическую нумерацию в стиле 1.2.1.
Делаю это так:
Код: css
1.
2.
3.
4.
5.
.section { counter-reset: item; }
.section > .title:before { content: counters(item, ".") ". "; counter-increment: item; }
ol { counter-reset: item; }
li { list-style-type: none; }
ol > li:before { content: counters(item, ".") ". "; counter-increment: item; }



С нумерацией вроде бы все хорошо.
Но проблема с оформлением.
Из-за того, что внутри LI есть блочный элемент, после выведенного номера (в ::before) вставляется новая строка и содержимое пункта выводится с новой строки.
div.item можно сделать inline. Но я все равно не могу эмулировать поведение обычного списка (с висячим отступом).

Подскажите, как такой список сделать правильно?

________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
...
Рейтинг: 0 / 0
14.01.2016, 00:04
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39146880
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Поясню: проблема не в нумерации (с ней я справлюсь ), а с тем, что когда внутри LI есть блочный элемент, то он выводится не в одной строке с номером.
...
Рейтинг: 0 / 0
14.01.2016, 00:38
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39146963
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B. , сделай таки некий законченный тестовый пример...
...
Рейтинг: 0 / 0
14.01.2016, 09:30
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39147064
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
https://jsfiddle.net/qxemyy5q/
Номера пунктов (в красных рамках) отделены от содержимого переводом строки.
А я бы хотел получить такое: https://jsfiddle.net/qxemyy5q/1/
но чтобы номера пунктов были висячим отступом.

Я тут подумал, что номер пункта можно сделать блочным, позиционирование задать относительным (relative) и тогда получится сделать висячий отступ, как в обычном нумерованном списке.
...
Рейтинг: 0 / 0
14.01.2016, 10:55
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39147282
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B.А я бы хотел получить такое: https://jsfiddle.net/qxemyy5q/1/
но чтобы номера пунктов были висячим отступом.
Что есть "висячий отступ"?
...
Рейтинг: 0 / 0
14.01.2016, 13:30
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39147326
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Висячий отступ:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
 1. Строка1
    Строка2
    Строка3

 2. Строка1
    Строка2
    Строка3

   2.1. Строка1
        Строка2

   2.2. Строка1
        Строка2

То что получается сейчас:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
    1. Строка1
    Строка2
    Строка3

    2. Строка1
    Строка2
    Строка3

        2.1. Строка1
        Строка2

        2.2. Строка1
        Строка2
...
Рейтинг: 0 / 0
14.01.2016, 14:03
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39147782
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
https://jsfiddle.net/qxemyy5q/2/

оно?!
...
Рейтинг: 0 / 0
14.01.2016, 22:19
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39147928
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Да, похоже.
Только нумерацию нужно выровнять по правой границе.
Вот так выглядит более точно: https://jsfiddle.net/qxemyy5q/4/

Можно ли сделать выравнивание по правой границе без использования text-align и фиксированного width?
Я пробовал задавать right:-1ex, нумерация выравнивается по правой границе, но относительно правой границы родителя, а не левой границы родителя.
...
Рейтинг: 0 / 0
15.01.2016, 09:33
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39149284
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B.А я бы хотел получить такое: https://jsfiddle.net/qxemyy5q/1/
Так оно вроде изначально так и отображается...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="section">
	<div class="title">Раздел 1</div>
	<ol>
		<li><div class="item">пункт 1.1</div></li>
		<li>
			<div class="item">пункт 1.2</div>
			<ol>
				<li><div class="item">пункт 1.2.1</div></li>
				<li><div class="item">пункт 1.2.2</div></li>
			</ol>
		</li>
		<li><div class="item">пункт 1.3</div></li>
	</ol>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
18.01.2016, 08:19
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39149358
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
krvsaТак оно вроде изначально так и отображается...
С висячим отступом отображается обычный (стандартный) список.
Но мне нужна нестандартная нумерация, поэтому я для списка делаю list-style-type:none, а номер добавляю через псевдоэлемент ::before. И по умолчанию этот псевдоэлемент выводится не вынесенным, а в теле основного текста списка, поэтому его нужно как-то вынести.
В моем последнем примере https://jsfiddle.net/qxemyy5q/4/ номера выводятся как мне надо (висячим отступом и с выравниванием по правому краю), но я это сделал задавая фиксированную ширину и указывая text-align.
А мне бы хотелось, чтобы выравнивался не сам текст, а блок (чтобы я не задавал фиксированную ширину), но не могу сообразить, как это сделать, не добавляя новых элементов в верстку.
...
Рейтинг: 0 / 0
18.01.2016, 10:07
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39149377
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Програмёр
Участник
Alibek B.Да, похоже.
Только нумерацию нужно выровнять по правой границе.
Вот так выглядит более точно: https://jsfiddle.net/qxemyy5q/4/

Можно ли сделать выравнивание по правой границе без использования text-align и фиксированного width?
Я пробовал задавать right:-1ex, нумерация выравнивается по правой границе, но относительно правой границы родителя, а не левой границы родителя.
https://jsfiddle.net/qxemyy5q/5/
оно?!
...
Рейтинг: 0 / 0
18.01.2016, 10:30
| Ответить | Цитировать | Написать  
Автонумерация многоуровневого списка
    #39149398
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B.С висячим отступом отображается обычный (стандартный) список.
Но мне нужна нестандартная нумерация, поэтому я для списка делаю list-style-type:none, а номер добавляю через псевдоэлемент ::before. И по умолчанию этот псевдоэлемент выводится не вынесенным, а в теле основного текста списка, поэтому его нужно как-то вынести.
Мне кажется ты сильно усложняешь себе жизнь... Перейди на просто й вариант.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
ol {
	list-style-type: none;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="section">
	<div class="title">Раздел 1</div>
	<ol>
		<li><div class="item"><span>1.1</span> пункт 1.1</div></li>
		<li>
			<div class="item"><span>1.2</span> пункт 1.2</div>
			<ol>
				<li><div class="item"><span>1.2.1</span> пункт 1.2.1</div></li>
				<li><div class="item"><span>1.2.2</span> пункт 1.2.2</div></li>
			</ol>
		</li>
		<li><div class="item"><span>1.3</span> пункт 1.3</div></li>
	</ol>
</div>
</body>
</html>


Такое можно сделать как на сервере, так и на клиенте, если тот список подгружаемый...
...
Рейтинг: 0 / 0
18.01.2016, 10:58
| Ответить | Цитировать | Написать  
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автонумерация многоуровневого списка
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]