Как разместить элементы списка горизонтально
Элементы списка (тег <ul>) по умолчанию располагаются вертикально:
- Элемент #1
- Элемент #2
- Элемент #3
Есть несколько способов как можно изменить вертикальное расположение на горизонтальное. Самое распространенное это с помощью свойства CSS display со значением inline (допускается также inline-block) у тега <li> . Помимо этого, можно использовать свойство CSS float.
Рассмотрим все варианты создания горизонтального списка на примерах.
Примеры с горизонтальным списом
Пример 1. Горизонтальный список display: inline
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Пример 2. Простое горизонтальное меню
Здесь мы будем применять свойство display: inline-block для задания блочности элементам.
Вот как это выглядит на странице:
Пример 3. Через свойство float:left
Этот способ применяется не часто. С помощью выравнивания свойством float можно сделать горизонтальное расположение списка. В примере приведено выравнивание по левому краю. Можно сделать также выравнивание по правому краю (float:right)
Как расположить список горизонтально css
Для того что бы расположить список (<ul>/<ol>) элементов в линию можно применить один из ниже приведенных способов.
Изменить свойство display у тега <li> на inline. Тем самым изменить способ показа элемента в документе с блочного на строчный, после этого <li>-теги станут в ряд, и контент внутри них будет занимать столько места, сколько требуется для отображения
Использовать flexbox. Аналогично предыдущему примеру изменить свойство display на flex, в родительском контейнере тегов li — в данном случае в <ul>, после чего они встанут в ряд.
How to create a horizontal list using HTML
By default, the HTML <ul> list will be rendered vertically with one list item on top of another.
When you need to create a list that expands horizontally, you need to add the display:inline style to the <li> elements of the list.
The following example code:
Will produce the following output:
You may also want to remove the default 40px padding style for the <ul> tag to let the list elements take the full width of the page:
A horizontal list is commonly used for creating a website’s navigation menu component. If you want to create a reusable navigation component, then you need to separate the CSS from the HTML document.
The following CSS code style will transform your <ul> element into a navigation bar component:
To use the CSS style above, you only need to add the nav class to the <ul> tag:
The HTML output will be as shown below:
And that’s how you can create a horizontal list using HTML and CSS ��
Level up your programming skills
I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!
About
Sebhastian is a site that makes learning programming easy with its step-by-step, beginner-friendly tutorials.
Learn JavaScript and other programming languages with clear examples.
How to make a <ul> display in a horizontal row
How can I make my list items appear horizontally in a row using CSS?
9 Answers 9
List items are normally block elements. Turn them into inline elements via the display property.
In the code you gave, you need to use a context selector to make the display: inline property apply to the list items, instead of the list itself (applying display: inline to the overall list will have no effect):