Horizontal list with css

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

Вывести маркированный список в одну строку и убрать отображение маркеров.

Решение

Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline , оно преобразует блочный элемент в строчный (пример 1).

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя свойства margin и padding к селектору UL , как показано в примере.

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Источник

CSS Horizontal Lists

tag with
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

Let’s say that we want to style the above list to something that looks like this

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.

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.

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.

ul.horizontal-list li:not(:last-child)

Let’s add padding to every list item.

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.

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.

body < font-family: sans-serif; >li:hover < text-decoration: underline; >ul.horizontal-list < list-style: none; background-color: #48abe0; color: white; display: inline-block; padding: 1rem 2rem; margin-top: 1rem; >ul.horizontal-list li < display: inline-block; padding: 0 0.5rem; min-width: 7rem; text-align: center; cursor: pointer; >ul.horizontal-list li:not(:last-child)

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.

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.

You Might Also Be Interested In

Источник

How to make a horizontal list using CSS?

The default list items are vertically aligned in a list format. To make a horizontal list, you need to write some CSS for it.

In this post, I will explain & show a couple of ways to create a horizontal list with CSS.

Different ways to create a horizontal list with CSS

In these examples, you will see different CSS properties to make a horizontal list such as display, flex, float, etc.

Throughout this post, I will use the following HTML for the list items until I introduce a new markup.

Using display: inline

Only with the above line of CSS, you can make a horizontal list.

Output

But the items are touching each other. So you need to add some space among those items. You can use margin, padding, or both to add space. In the below example, I added a 20px margin to the right side.

Using display: flex

. See my CSS below.

Using CSS float

In this example above, I used the CSS float to the left. However, it’s very important to know that you need to clear the floats after using them. Otherwise, the next content may mess up with it.

ul li < list-style: none; float: left; margin-right: 20px; >ul li:last-child < margin-right: 0; >/* for clearing the float */ ul::after

Horizontal ordered list

so far. But you can use the same tactic on the ordered
list as well.

Please consider a new HTML for this explanation as you see below.

1. Buy apples
2. Eat banana
3. Make orange juice
4. Purchase garapes
5. Climb mango tree

1. Buy apples
2. Eat banana
3. Make orange juice
4. Purchase grapes
5. Climb mango tree

To align them horizontally, you can use any one of the previous approaches. Let me apply the first (display: inline) method.

See the output below.

1. Buy apples
2. Eat banana
3. Make orange juice
4. Purchase grapes
5. Climb mango tree

The list numbers (1, 2, 3…) disappeared after I aligned them horizontally. But if you want to keep the ordered list numbers, you have to reset the counter as you see in my CSS below.

ol < counter-reset: list-counter; >ol li < display: inline; margin-right: 20px; padding-left: 20px; /* this is required to position the numbers */ counter-increment: list-counter; /* required */ position: relative; /* required */ >ol li:last-child < margin-right: 0; >ol li:before < content: counter(list-counter) "."; display: inline; position: absolute; /* required */ left: 1px; /* required */ >

See the latest output below.

1. Buy apples
2. Eat banana
3. Make orange juice
4. Purchase grapes
5. Climb mango tree

Build HTML CSS projects

Popular posts

About Shihab

With over 20K monthly readers, my goal is to help small businesses to create a stunning online presence.

At the same time, I’ve been creating resources for web developers, designers & freelancers in general.

Categories

Recent comments

Yes, you can edit the code to make them center aligned. You can contact me on Skype to get customized/extra…

Hi, thank you for this. It almost helped me to achieve what I wanted. Only one problem left: I want…

Thank you, that was so helpful! Especially the ‘Extra help for non-techies and newbies’ part 🙂

You have crafted an amazing guide about the best Fiverr gig image size guide. I found it helpful while doing…

Wow great it worked like a charm. Thanks buddy

Disclosure: I accept suggestions to make improvements to any content & user experience. So if you have any, please feel free to reach out. You will find a few different contact methods on the contact page. But, I may not respond to those persons who intend to get links.

Shihab Ul Haque

You can call me Shihab. I am a web developer and have been working with PHP & WordPress a lot.
I have a master’s degree and left my regular job to fully engage with the field that I love working in. I live in Bangladesh and help business owners to create a stunning online presence.

Источник

How to create a horizontal list using HTML and CSS

In this post, we will learn how to create and display list horizontally in CSS.

or
tags, and all the list items are written inside the
tags. And this will render the list vertically on our web page. For example,

 ul> li>One li> li>two li> li>Three li> ul> 

This will create a vertical list like this

Now, let’s say we need to create a navigation bar on our website and we need to display the list horizontally.

To do that we have two ways:

Let’s check each method with an example

Using inline-block to display list horizontally

The inline-block property displays the element as an inline-level block container. So when an element is set as display:inline-block , we can set the height and width to it.

So, let’s say we have a list of page links for our navigation bar on the website.

 ul> li>Home li> li>About li> li>Contact li> ul> 

Now our links are displayed horizontally. We can add some background, width, and margin to make it look good too.

Using flex-box to make a horizontal list

To align the list horizontally using flex-box we just have to set the parent element as display: flex .

element. So we just have to set it to display:flex and all the child elements i.e
tags will be displayed horizontally.

 ul> li>Home li> li>About li> li>Contact li> ul> 

ul< display:flex; > li< width: 80px; background: lightgreen; margin-right: 10px; list-style: none > 

The output will be like this

With flex-box we can also use other useful property like justify-content that helps us to properly give spaces between the child elements.

ul< display:flex; justify-content: space-between; > 

The space-between lets the items be evenly distributed in a line.

Using justify-content: space-around in the parent element i.e the

ul< display:flex; justify-content: space-around; > 

The space-around lets the child items be distributed in a line with equal spaces around them.

Related Topics:

Источник

Very Simple Responsive Horizontal List In HTML CSS

Welcome to a tutorial on how to create a responsive horizontal list in HTML and CSS. So you need to create a horizontal list in your project? Maybe to show a list of hashtags? Well, let’s walk through a real quick example – Read on!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

HTML CSS HORIZONTAL LIST

All right, let us now get into the examples of how to create a horizontal list with HTML and CSS.

RESPONSIVE HORIZONTAL LIST DEMO

PART 1) THE HTML

PART 2) THE CSS – HORIZONTAL LIST

/* (A) "CONVERT" TO HORIZONTAL LIST */ .hlist < display: flex; flex-wrap: wrap; padding: 0; margin: 0; >.hlist li

• Setting the list to display: flex pretty much does the magic, this will lay out the list items in a horizontal manner.
• flex-wrap: wrap Allow the list items to break into a new row if it gets too long.
• padding: 0 margin: 0 Removes the default list indentation.
• list-style-type: none Removes the default bullet points or numbering.

PART 3) THE CSS – COSMETICS

Yep, this part is up to you – Set the font size, colors, padding, margin, and whatever else. The end.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

EXTRA) ALTERNATIVE HORIZONTAL LIST

/* (A) BIG SCREEN - 4 PER ROW */ .hlist < display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 0; >.hlist li < list-style-type: none; >/* (B) SMALL SCREEN - 2 PER ROW */ @media screen AND (max-width: 640px) < .hlist < grid-template-columns: repeat(2, minmax(0, 1fr)); >>

If you want exactly X items per row on the big screens, and Y items per row on small screens – CSS Grid is a better choice.

LINKS & REFERENCES

• CSS Flex – MDN
• CSS Grid – MDN
• List Style – CSS Tricks
• Using Media Queries – MDN
• Looking to create a horizontal menu using the list? Check out my Hamburger Menu tutorial.

TUTORIAL VIDEO

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment Cancel Reply

Search

Breakthrough Javascript

Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

Socials

About Me

W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

Источник