1. home
  2. Tutorials
  3. Tutorial
Edit

Inline Lists

The Inline Lists are used to represents the list of items in an horizontal direction. 

Example of Code

<style type="text/css">
   .inline-lists {
        font-size: 22px;
        margin: 0;
        padding-left: 0;
        list-style: none;
      }
      .inline-lists > li {
        display: inline-block;
      }
</style>
<body>
    <ul class="inline-lists">
      <li>Apples</li>
      <li>Oranges</li>
      <li>Watermelons</li>
    </ul>
</body>

Output

   
         
  • Apples
    •      
  • Oranges
    •      
  • Watermelons
    •