Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

List Item in Single Line

3.69/5 (13 votes)
15 May 2017CPOL 56.2K  
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.

HTML
<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

CSS
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

CSS
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)