Ul li html как список сделать в строчку

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.

Search

Type the keyword below and hit enter

report this ad

Click to see all tutorials tagged with:

Ezoic

report this ad

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):

CSS Horizontal Lists

Example of 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.

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

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

Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют маркированные списки, которые создаются с помощью html тегов <ul> и <li> . Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.

Читать:

Strokescribe что это за программа

Для начала создадим обычный маркированный список, содержащий пункты нашего меню:

Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором «menu» .

По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:

Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки (добавить фоновый цвет, рамки, отступы, изменить шрифт) можно получить привлекательную навигационную панель.

Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block . Я буду использовать правило display:inline-block . Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:

Теперь элементы списка будут расположены по горизонтали:

Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт <code>li</code>, уберем подчеркивание ссылок, настроим отступы и др.:

В итоге получится такое привлекательное меню:

Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

Горизонтальное меню по центру

Выравнять меню по центру можно так:

Горизонтальное меню с пунктами одинаковой ширины

Чтобы сделать все пункты меню одинакового размера указываем для них нужный размер. Только главное чтобы в сумме размеры пунктов не превышали размер всей панели. Можно сделать так:

Если добавить немного трансформации:

то получим меню со скошенными углами:

На этом все, пробуйте и предлагайте свои варианты в комментариях. Ссылка на исходный файл с примерами. До новых встреч!