Список горизонтальный: Как разместить элементы списка горизонтально? – Как разместить элементы списка горизонтально или горизонтальное меню с помощью CSS

Содержание

Как разместить элементы списка горизонтально?

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

По-умолчанию элементы списка располагаются вертикально друг под другом.

Для того, чтобы выравнять их по горизонтали необходимо использовать свойство display для <li> элементов.

Код HTML-разметки одинаков для всех методов:

<ul>
	<li>Первый</li>
	<li>Второй</li>
	<li>Третий</li>
</ul>

Первый способ

Первый, самый древний способ - в качестве значения display выставляем inline. Так же для наглядности выставим границу в 1px:

ul li {
	border:1px solid #000;
	display:inline;
}

Вот как это будет выглядеть:

  • Первый
  • Второй
  • Третий

В этом случае так же добавляются стандартные отступы между элементами, если они вам не нужны то смотрите Третий способ.

Второй способ

Это более современный вариант, в качестве значения display ставим inline-block. Это значит, что <li> элементы станут блочными но расположены будут в строчку, в некоторых случаях нужен именно такой вариант:

ul li {
	border:1px solid #000;
	display:inline-block;
}
  • Первый
  • Второй
  • Третий

В этом случае так же добавляются стандартные отступы между элементами, если они вам не нужны то смотрите Третий способ.

Третий способ

Последний вариант более специфичен. Сначала задаем свойству display значение block, сделав элементы блочными, а потом при помощи свойства float, прижимаем их к левому краю.

В этом случае так же лучше задавать тегу <ul> свойство overflow со значением hidden, иначе браузер "не почувствует" элементов списка.

ul {
	overflow:hidden;
}
ul li {
	border:1px solid #000;
	display:block;
	float:left;
}
  • Первый
  • Второй
  • Третий

Отличительная особенность этого способа в том, что между элементами нету никаких отступов стандартных и их можно регулировать самому при помощи свойств margin и padding.

CSS горизонтальные списки - Ruby Brewed

Горизонтальные списки полезны, например, при создании меню, списка ссылок и т.п. Лично я для создания меню традиционно использую
таблицы
(table), но это может быть не совсем правильно. Т.к. список -- это всё-таки структурированные данные, и для поисковой машины должен выглядеть в более выгодном свете. Это просто мои догадки, и возможно не совсем верные ;).

Итак, создадим структуру списка.

HTML: Неупорядоченный список (ul)

<ul>
<li><a href="http://dotrb.blogspot.com/search/label/HTML">HTML</a></li>
<li><a href="http://dotrb.blogspot.com/search/label/XML">XML</a></li>
<li><a href="http://dotrb.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://dotrb.blogspot.com/search/label/XSLT">XSLT</a></li>
</ul>

Создаём стили CSS для списка. Если задаёте стили в теле сообщения, заключайте их между тегами <style> и </style>.

CSS: Стили для списка

.listMenu {
margin:0; padding:0;
list-style-type:none;
}
.listMenu li {
display:inline;
}

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

CSS: Горизонтальное меню - список

.listMenu {
margin:0; padding:0;
list-style-type:none;
float:right;
}
.listMenu li {
font-family: Georgia, Times, serif;
display:inline;
padding:0px 4px;
}
.listMenu li a {
color:#000;
text-decoration:none;
}
.listMenu li a:hover {
color:#000;
text-decoration:none;
border-bottom:3px solid #C61A1A;
}

На этом краткий экскурс по спискам закончен 🙂

Списки | WebReference

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

Горизонтальный список

Такой список обычно используется для создания меню, к элементу <ul> для этого нужно только добавить класс list-inline (пример 1).

Пример 1. Горизонтальное меню

<ul>
  <li><a href=#>Сепульки</a></li>
  <li><a href=#>Сепулькарии</a></li>
  <li><a href=#>Сепуление</a></li>
</ul>

Вот как выглядит подобное меню (рис. 1). Стиль средней ссылки меняется при наведении на неё курсора.

Горизонтальный список

Рис. 1. Горизонтальный список

Список определений

Список определений состоит из двух элементов — термина и его определения. Сам список создаётся с помощью контейнера <dl>, термин — элементом <dt>, а его определение — с помощью <dd> (пример 2).

Пример 2. Список определений

<dl>
  <dt>Сепульки</dt>
  <dd>Важный элемент цивилизации ардритов с планеты Энтеропия.</dd>
  <dt>Сепулькарии</dt>
  <dd>Устройства для сепуления.</dd>
  <dt>Сепуление</dt>
  <dd>Занятие ардритов с планеты Энтеропия.</dd>
</dl>

Bootstrap предлагает сделать такой список нагляднее за счёт горизонтального расположения термина и определения. К элементу <dl> достаточно добавить класс dl-horizontal (пример 3).

Пример 3. Горизонтальный список определений

<dl>
  <dt>Сепульки</dt>
  <dd>Важный элемент цивилизации ардритов с планеты Энтеропия.</dd>
  <dt>Сепулькарии</dt>
  <dd>Устройства для сепуления.</dd>
  <dt>Сепуление</dt>
  <dd>Занятие ардритов с планеты Энтеропия.</dd>
</dl>

Результат данного примера показан на рис. 2.

Горизонтальный список определений

Рис. 2. Горизонтальный список определений

Если термин слишком длинный, то он будет обрезан и к нему добавлено многоточие. Также при уменьшении размеров окна вид списка меняется на традиционный (рис. 3).

Список определений

Рис. 3. Список определений

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03.03.2015

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Создание вертикального блочного списка - Служба поддержки Office

Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке).

Вертикальный блочный список графически представляет задачи, процесса или рабочего процесса, каждый этап содержит несколько дочерних действия или момента времени. С помощью графического элемента SmartArt в Excel, PowerPoint или Word, можно создать вертикальный блочный список и включают на листе, презентации или документа.

Вертикальный блочный список

В этой статье

Создание вертикального блочного списка

Добавление и удаление полей в вертикальный блочный список

Перемещение поля в вертикальный блочный список

Изменение цветов вертикальный блочный список

Применение стиля SmartArt вертикальный блочный список

Анимация вертикальный блочный список

Создание вертикального блочного списка

  1. На вкладке Вставка в группе Иллюстрации нажмите кнопку SmartArt.

    Группа «Иллюстрации» на ленте

  2. В коллекции Выбор графического элемента SmartArt нажмите кнопку списоки дважды щелкните Вертикальный блочный список.

  3. Чтобы ввести текст в поле, выполните одно из указанных ниже действий.

    • Щелкните [Текст] в области текста, а затем введите необходимый текст.

    • Скопируйте в буфер обмена текст из другой программы или расположения, щелкните [Текст] в области текста, а затем вставьте его.

      Примечание: Если область текста не отображается, щелкните элемент управления.

      Элемент управление панели текста

    • Щелкните поле в графическом элементе SmartArt и введите свой текст.

      Примечание: Для достижения наилучших результатов используйте этот вариант после добавления всех необходимых полей.

К началу страницы

Добавление и удаление полей в вертикальный блочный список

Добавление поля

  1. Щелкните графический элемент SmartArt, в который необходимо добавить поле.

  2. Щелкните существующее поле, ближайшее к месту вставки нового поля.

  3. В разделе Работа с рисунками SmartArt на вкладке Конструктор в группе Создание рисунка щелкните стрелку меню Добавить фигуру.

    Если вкладка Работа с рисунками SmartArt или Конструктор не отображается, убедитесь, что рисунок SmartArt выделен.

  4. Выполните одно из следующих действий:

    • Чтобы вставить поле на том же уровне, что и выбранное поле, но после него, выберите команду Добавить фигуру после.

    • Чтобы вставить поле на том же уровне, что и выбранное поле, но перед ним, выберите команду Добавить фигуру перед.

Удаление поля

Чтобы удалить поле, щелкните его границу и нажмите клавишу DELETE.

Примечания: 

  • При необходимости добавьте поле вертикальный блочный список, попробуйте добавить поле до или после выбранного поля, чтобы определить место для нового поля. Исправить типичные ошибки при работе с элементами SmartArt совсем несложно.

  • Добавление поля из области текста

    1. Поместите курсор в начало текста, куда необходимо добавить поле.

    2. Введите необходимый текст в новое поле, нажмите клавишу ВВОД, а затем нажмите клавишу TAB для увеличения отступа для нового поля или клавиши SHIFT+TAB для уменьшения отступа.

К началу страницы

Перемещение поля в вертикальный блочный список

  • Чтобы переместить фигуру, щелкните ее и перетяните в новое место.

  • Чтобы переместить поле малыми шагами, нажмите клавишу CTRL и, удерживая ее нажатой, нажимайте клавиши со стрелками.

К началу страницы

Изменение цветов вертикальный блочный список

Быстро добавить конструктор качество оформления и польский в графический элемент SmartArt, можно изменить цвета и Применение стиля SmartArt вертикальный блочный список. Вы также можете добавить эффекты, такие как свечение, сглаживание или объемные эффекты. В презентациях PowerPoint вы можете анимировать вертикальный блочный список.

К полям в графических элементах SmartArt можно применять цветовые комбинации из цвета темы.

  1. Щелкните рисунок SmartArt, цвет которого нужно изменить.

  2. В контекстных инструментах Работа с рисунками SmartArt на вкладке Конструктор в группе Стили SmartArt нажмите кнопку Изменить цвета.

    Панель инструментов SmartArt: вертикальный блочный список

    Если вкладка Работа с рисунками SmartArt или Конструктор не отображается, выделите графический элемент SmartArt.

  3. Щелкните нужную комбинацию цветов.

Совет: При наведении указателя мыши на эскиз становится видно, как изменяются цвета в рисунке SmartArt.

Изменение цвета линий или типа границы фигуры

  1. В графическом элементе SmartArt щелкните правой кнопкой мыши границу фигуры, которую нужно изменить, и выберите пунк Формат фигуры.

  2. Чтобы изменить цвет границы, выберите пункт Цвет линии, нажмите кнопку Цвет Выбор цветов , а затем щелкните нужный цвет.

  3. Чтобы изменить тип границы фигуры, щелкните Тип линии и задайте нужные параметры.

Изменение цвета фона поля вертикальный блочный список

  1. Щелкните правой кнопкой мыши границу поля и выберите пункт Формат фигуры.

  2. Щелкните Заливка и выберите элемент Сплошная заливка.

  3. Нажмите кнопку Цвет Выбор цветов и выберите нужный цвет.

  4. Чтобы задать степень прозрачности фонового цвета, переместите ползунок Прозрачность или введите число в поле рядом с ним. Значение прозрачности можно изменить от 0 % (полная непрозрачность, значение по умолчанию) до 100 % (полная прозрачность).

К началу страницы

Применение стиля SmartArt вертикальный блочный список

Стиль SmartArt — это сочетание различных эффектов, например, стилей линий, рамок или трехмерных эффектов, которые можно применить к полям графического элемента SmartArt для придания им профессионального, неповторимого вида.

  1. Щелкните графический элемент SmartArt, стиль SmartArt которого требуется изменить.

  2. В контекстных инструментах Работа с рисунками SmartArt на вкладке Конструктор в разделе Стили SmartArt выберите нужный стиль SmartArt.

    Панель инструментов SmartArt: вертикальный блочный список

    Чтобы просмотреть другие стили SmartArt, нажмите кнопку Дополнительные параметры  Кнопка "Еще" .

    Если вкладки Работа с рисунками SmartArt или Конструктор не отображаются, убедитесь, что рисунок SmartArt выделен.

К началу страницы

Анимация вертикальный блочный список

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

  1. Щелкните графический элемент SmartArt, который нужно анимировать.

  2. На вкладке Анимация в группе Анимация выберите пункт Анимация и значение Последовательно по ветвям.

    Вкладка "Анимация"

Примечание: При копировании вертикальный блочный список, содержащий анимация, примененная к нему на другой слайд, анимация также копируется.

К началу страницы

Перевернуть столбец или строку специальной опцией в Excel

 

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

Транспонировать (англ. Transpose) — переставлять, перемещать.

Рассмотрим работу опции «транспонировать» на примере случайно придуманного списка овощей, хранящихся на овоще базе.

Список овощей расположен вертикально:

Овощи
Томаты;
Свекла;
Огурцы;
Репа;
Редька черная;
Редька белая.

 

Пошаговые действия:

Шаг 1.

Выделить ячейки со списком;

Шаг 2.

Копировать ячейки сочетанием клавиш » ctrl»+»C» или вызвав правой кнопкой мыши контекстное меню и выбрав строчку «Копировать»;

Шаг 3.

Перенести курсор в начало предполагаемого горизонтального списка;

Шаг 4.

Вызвать меню специальной вставки и выбрать опцию «Транспонировать».

Скопированные ячейки из колонки (столбца) будут вставлены в строку горизонтально.

 

Расположить вертикальный список в «Word» горизонтально

 

В программе «Excel» можно расположить вертикальный список горизонтально и наоборот при помощи опции транспонировать, о которой рассказывали ранее в статье:

Перевернуть столбец или строку при помощи кнопки «Транспонировать» в Excel.

, а также при помощи функций в статье:

Как расположить данные столбца горизонтально (транспонировать) при помощи функций

 

Остается вопрос о том, как перевернуть список и написать его в одну строчку при переносе из таблицы «Excel» в текстовый документ «Word».

Для примера возьмем перечень запасный частей, хранящихся на складе из таблицы «Excel». Этот перечень нужно записать в текстовый документ «Word» в одну строчку через разделитель — запятую.

Зап. Части
Шестерня
Вал Осевой
Шпонка
Маховик
Подшипник
Ремень привода колен. вала

Сделать это можно следующим образом в 3 шага:

Шаг 1-й.

Для записи макроса в «Word» следует включить панель «Разработчик», кликнув правой кнопкой по панели быстрого доступа, выбрав вкладку «настройка ленты». В настройке ленты поставить флажок галочку напротив опции «Разработчик».

Шаг 2-й.

В документ «Word» нужно записать макрос, приведенный ниже. Назначит макрос сочетанию кнопок.
Открыть окно «Макросы»;

Нажать кнопку «Создать»;

Скопировать алгоритм:

Sub RuExcel()

    Selection.HomeKey Unit:=wdLine

    Selection.MoveDown Unit:=wdLine, Count:=1

    Selection.TypeBackspace

    Selection.TypeText Text:=», «

End Sub

Сохранить макрос.
Назначит макрос сочетанию кнопок.

Шаг 3-й.

Скопировать список из таблицы «Excel» и вставить его специальной вставкой: «Сохранить только текст» или «Текст без форматирования».

Шаг 4-й.

Поставить курсор в конец первой строчки списка и активировать макрос. Выполнять макрос пока весь список не станет одной текстовой строкой.

Вопросы можно задавать в комментариях или на форуме сайта.

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *