Как расположить список горизонтально css
Для того что бы расположить список (<ul>/<ol>) элементов в линию можно применить один из ниже приведенных способов.
Изменить свойство display у тега <li> на inline. Тем самым изменить способ показа элемента в документе с блочного на строчный, после этого <li>-теги станут в ряд, и контент внутри них будет занимать столько места, сколько требуется для отображения
Использовать flexbox. Аналогично предыдущему примеру изменить свойство display на flex, в родительском контейнере тегов li — в данном случае в <ul>, после чего они встанут в ряд.
CSS Horizontal Lists
HTML lists, represented by the <ul> tag with <li> tag children, are vertical and bulleted by default. For custom styling, we need to apply dedicated CSS properties.
For instance, let’s build a horizontal list.
Let’s kick off by writing a simple unordered list.
This is how the list will look like
- Home
- Projects
- About Us
- Contact
Let’s say that we want to style the above list to something that looks like this
- Home
- Projects
- About Us
- Contact
So how can we achieve this? Let’s go through the process step by step.
Our first observation is that in our final outcome, we do not want the bullet styling. The styling of list items is controlled by the list-style property. Let’s remove them by setting the value to none.
- Home
- Projects
- About Us
- Contact
The bullets are gone, but our list is still vertical. That is because the list items, by default, are elements with a block display and hence are taking full horizontal space. Let’s set them to have an inline-block display.
- Home
- Projects
- About Us
- Contact
There we go, we have our horizontal list.
We need to add a vertical line to the right of every list item, but not the last one.
- Home
- Projects
- About Us
- Contact
Let’s add padding to every list item.
- Home
- Projects
- About Us
- Contact
The length of text in every list item varies. To have a uniform visual appearance, we will give a constant min-width to all elements and align the text in the center.
- Home
- Projects
- About Us
- Contact
At this point, you have your list ready. All we need to do is set background and text colors according to the theme of your site/app.
- Home
- Projects
- About Us
- Contact
Use Cases
Horizontal lists are one of the most commonly used entities in web design. Perhaps you interact with them daily. They are most commonly found in navbars, table headers, tabs list, etc.
Let’s take a look at more implementations.
Here is a similar list
A horizontal list group
An excel-like table header
A navbar-like implementation
Conclusion
Although unordered lists are vertical out-of-the-box, web developers regularly need to implement horizontal lists. Implementing horizontal lists is, thanks to the flexibility of CSS, not a tough task. By setting the display of list items to inline , we can easily achieve a horizontally placed group of list items.
UnusedCSS helps website owners remove their unused CSS every day. Sign Up to see how much you could remove.
Как разместить элементы списка горизонтально
Элементы списка (тег <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)
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!
report this ad
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.
Free Code Snippets Book
Get my FREE code snippets Book to 10x your productivity here
report this ad