Как сделать многоуровневый нумерованный список на html + css, чтобы многоуровневый список отображался в Word?

Данный пример в браузере отображается, как многоуровневый нумерованный список, а в word как одноуровневый нумерованный список

<HTML>
            <HEAD>
                <STYLE>
					ol {
					/* убираем стандартную нумерацию */
					list-style: none; 
					/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
					counter-reset: li; 
					}
					li:before {
					/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
					counter-increment: li; 
					/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем.
 
  Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
					content: counters(li,".") ". "; 
					}
				</STYLE>
            </HEAD>
            <BODY>
			<ol>
			  <li>пункт</li> <!-1.->
			  <li>пункт           
				<ol>
				  <li>пункт</li> <!-2.1.->
				  <li>пункт</li> <!-2.2.->
				  <li>пункт
					<ol>
					  <li>пункт</li> <!-2.3.1.->
					  <li>пункт</li> <!-2.3.2.->
					  <li>пункт</li> <!-2.3.3.-> 
					</ol>
				  </li> <!-2.3.->
				  <li>пункт</li> <!-2.4.->  
				</ol>
			  </li> <!-2.->
			  <li>пункт</li> <!-3.->        
			  <li>пункт</li> <!-4.
 
 ->        
			</ol>
			</BODY>
        </HTML>
  • html
  • css
  • ms-word
6

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как создать многоуровневый список в HTML – Ремонт-комп

Содержание

Создание многоуровневого списка в HTML сложнее, чем создание многоуровневого списка в текстовом процессоре, но все же может быть достигнуто с помощью HTML и CSS. Ниже приведены шаги по созданию многоуровневого списка в HTML с помощью CSS..

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

Пример HTML

Ниже приведен пример того, как можно создать многоуровневый список в HTML с использованием HTML и стиля CSS, определенного в тегах HTML. В этом примере у нас есть два элемента списка, а во втором элементе списка другой упорядоченный список с типом стиля списка с более низким альфа-каналом для создания стиля списка a, b и т. Д..

<ол>
<Ли>Первый</ li>
<Ли>Второй
<ол стиль =»список-стиль-тип: нижняя альфа; padding-bottom: 0;»> <ли стиль =»маржа слева: 2em»>Суб второй</ li> <ли стиль =»маржа слева: 2em; padding-bottom: 0;»>Другой Sub</ li> </ ол>

</ li>
<Ли>В третьих</ li>
<Ли>Четвертый </ li>
</ ол>
Примечание

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

Пример вывода

  1. Первый
  2. Второй
    1. Суб второй
    2. Другой Sub
  3. В третьих
  4. Четвертый

Пример CSS и HTML

Приведенное выше решение отлично работает, если вам нужно всего несколько раз создать многоуровневый список. Однако, если вы намереваетесь иметь несколько многоуровневых списков на своем сайте, было бы лучше включить код CSS, аналогичный приведенному ниже примеру.

В нашем примере мы создали два класса с именем «Римский» и «квадрат» и назовите их в HTML-коде.

CSS код

<тип стиля =»текст / css»>
.Римский {
список-стиль-тип: нижний римский;
}
.квадрат {
тип-стиль-список: квадрат;
маржа слева: -2em;
}
</стиль>

HTML код

<ul class =»Римский»>
<Ли>Первый</ li>
<Ли>Второй
<ul class =»квадрат»>
<Ли>Суб второй</ li>
<Ли>Другой Sub</ li>

</ ul>
</ li>
<Ли>В третьих</ li>
<Ли>Четвертый</ li>
</ ul>

Пример вывода

  • Первый
  • Второй
    • Суб второй
    • Другой Sub
  • В третьих
  • Четвертый

Доступные значения CSS list-style-type

Ниже приведен список других значений типа списка CSS, которые можно использовать вместо примеров, которые мы показали ранее. Мы также включили краткое описание каждого значения.

Примечание

Не все эти значения работают или кажутся одинаковыми во всех браузеры.

диск – Маленький сплошной кружок (показан выше).
круг – Маленький пустой кружок (показан выше).
квадрат – Сплошной квадрат.
десятичный – Десятичный номер, начинающийся с «1.» (показано выше).
десятичный-ведущий-ноль – Десятичное число, начинающееся с 0 (например, 01, 02, 03 и т. Д.).
нижний римский – Строчные буквы римская цифра, начинающаяся с «я.».
верхний римский – Верхний регистр римская цифра, начинающаяся с «я.».
нижнегреческий – Строчный греческий.
нижнелатинский – Строчная латиница
верхнелатинский – Прописные латинские буквы
армянский – Традиционная армянская нумерация
грузинский – Традиционная грузинская нумерация
нижняя альфа – Строчные буквы алфавитный надпись, начинающаяся с «а.» (показано выше).
верхняя альфа – Буквы в верхнем регистре, начинающиеся с «А. «.
никто – Ничего не показывать.

Отступы во вложенных списках в HTML/CSS

спросил

Изменено 9 месяцев назад

Просмотрено 56 тысяч раз

Я начал использовать Twitter Bootstrap, который полезен мне (как программисту) для получения прилично выглядящего сайта без необходимости написания большого количества CSS.

Однако что-то сводит меня с ума. У меня есть вложенный список, например

 
    
  
  • Здравствуйте!
    • 
  
  • Мир
    <ул>
      
  • Широкий
    • 
      
  • Интернет
    •

Но первый и второй уровни этого списка НЕ ​​имеют разный отступ (т.е. они выравниваются друг с другом слева)

В обычных вложенных списках html более глубокие подсписки имеют больший отступ.

Но что-то в таблице стилей должно отключать это. Как мне найти, что контролирует это? Я не вижу атрибута CSS «отступ списка» для элементов li ни в одной документации.

  • HTML
  • CSS
1

Просто используйте Firebug в инструментах разработчика FF или Chrome: щелкните правой кнопкой мыши цель и выберите элемент «Проверить ». Вы можете визуально и текстуально проверить свойства CSS, чтобы увидеть, что вызывает сбой.

Вероятно, вам нужно правило типа

 ul > li {
    поле слева: 10px;
}

Просто чтобы добавить к ответам выше: padding-left сделает отступ слов, но не маркера, а

margin-left также сделает отступ маркера.

Пример: http://jsfiddle.net/GMLxv/

У меня была та же проблема, что и у вас.

В type.less есть правило, которое отменяет отступ для списков:

 ul, ol {
  заполнение: 0;
  поле: 0 0 @baseLineHeight / 2 25px;
}

Я переопределил это правило:

 ul, ol {
  отступ: 0px 25px;
}

Отступы во вложенных списках возвращены.

Вы хотите установить padding-left :

 li { padding-left: 1em; }

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

Вы не стали бы применять отступы к элементам li , поскольку это создало бы отступ между маркером и списком, если вы используете маркированный список. См.:

 ul > li {
    отступ слева: 25px;
}

результат:

 - Здравствуйте
-    Мир
    -    Широкий
    - Интернет

Вы также не захотите применять его к родительским элементам ul с ul { padding-left:25px;} , что даст:

 - Привет
    - Мир
        - Широкий
        - Интернет

Ответ на ваш вопрос:

 li > ul {
    отступ слева: 25px;
}

результат:

 - Здравствуйте
- Мир
    - Широкий
    - Интернет

Возможно, вы установили маркеры так, чтобы они находились внутри элементов списка, а не перед ними, что значительно изменило бы ваш внешний вид.

CSS для его применения: ul { list-style-position: inside; }

Подробнее о позиции стиля списка.

Пример: https://jsfiddle.net/g0k0obwh/

1

Используя Bootstrap, вы можете сделать это, написав следующий код. Просто вставьте свой JSP или HTML и протестируйте. Вы можете перейти по этой ссылке для получения дополнительной информации.

http://www.bootply.com/DglnYJTSKA

 
              Подэлемент 4d
Подпункт 2 Подпункт 3