List Item in Single Line

Introduction

Default HTML <ul></ul> is living some padding and display all items in different line with list-style disks. So, many people want to list time in the same line without any list style.

Today, I am going to explain some CSS trick to display all the lists into the one line, i.e., when you want to show menu in your HTML, then you will write the following HTML code.

<ul>
   <li>Home</li>
   <li>Blog</li>
   <li>Faq</li>
   <li>About Us</li>
   <li>Contact Us</li>
</ul?

This will display output like:

• Home
• Blog
• FAQ
• About us
• Contact us

Background

To display all the lists in one line, follow the following CSS code:

Solution 1

ul { 
   padding: 0px;
}
li {
   float: left;
   width: auto;
   list-style: outside none none;
}

When using this code, all elements will display in one line with float left. We have set width: auto so now list item will take width as per the content.

Solution 2

ul { 
   padding: 0px
}
li {
   display: inline-block;
   width: auto;
   list-style: outside none none;
}

When using this code, all elements will display in one line with display inline-block. We have set width: auto so now list item will take width as per the content.

After applying one of the above solutions, your menu will display like this:

Home Blog FAQ Contact us About us

So, enjoy with this solution now.