Horizontal List CSS

The horizontal list CSS of HTML tags is a type of unordered and ordered list that we use to display horizontal lists on websites. These types of horizontal lists typically have <ul> and <ol> tags, which are both used for ordered and unordered lists respectively. Horizontal lists allow us to place items in an organized manner, such as with the way that clothing lines are displayed in department stores. This article will cover how to style horizontal lists.

Horizontal List CSS- Display:inline

In order to create horizontal lists, we need to modify the rendering mode, not for our list but its elements. Adding display: inline will produce them lined up one after another with no distinction between items and nothing indicating when they’re finished except in this new style.

Syntax:

Display:inline

Example:

   <style type="text/css">
        ul li {
            display: inline;
            list-style-type: none;
            border: 1px solid #000;
            margin: 5px;
            padding: 2px;
        }
    </style>       
    <ul>
        <li>Home</li>   
        <li>About us</li>   
        <li>History</li>   
        <li>Contacts</li>   
    </ul>

Display:inline-block:

In addition to this, we can use the display:inline-block property. This will make our list horizontal and act as a block item in lists, unlike when using just ‘display: inline’ which only makes it look like a list horizontal but does not allow its width or height properties to work correctly so instead of using just that one word alone you should add ‘block’ onto that sentence too – i.e., “Inline Block”.

Syntax:

Display:inline-block

Example:

<html>
<head> 
<title> Horizontal list css </title>  
 <style type="text/css">
        ul li {
            display: inline-block;
            list-style-type: none;
            border: 1px solid #000;
            margin: 5px;
            padding: 2px;
        }
    </style>       
    <ul>
        <li>Home</li>   
        <li>About us</li>   
        <li>History</li>   
        <li>Contacts</li>   
    </ul>

The Float property:

The float property is a horizontal positioning scheme that provides horizontal alignment of an element in relation to its padding, display area, and other floating elements.

The horizontal float property is a part of the ‘display’ category, and it specifies whether an element should be displayed horizontally or not.

Syntax:

Float:left|right;  

Example:

<html>
<head> 
<title> Horizontal list css </title>  
<style type="text/css">
        ul li {
            float: left;
            list-style-type: none;
            border: 1px solid #000;
            margin: 5px;
            padding: 2px;
        }
    </style>       
</head>
<body>
    <ul>
        <li>Home</li>   
        <li>About us</li>   
        <li>History</li>   
        <li>Contacts</li>   
    </ul>
</body>
</html>

This article covered horizontal-display HTML lists and some popular applications. We are used to horizontal <ul> or <ol> lists as bulleted horizontal lines. However, with a few CSS tweaks, we can reorder items in horizontal order. Horizontal lists allow us to place items in an organized manner, such as with the way that clothing lines are displayed in department stores.

Conclusion:

In conclusion, the horizontal list is a type of unordered or ordered list that we use to display items horizontally across our website’s screen. This article covered how to style these lists in order to make them look more appealing and organized for your visitors. If you have any questions about styling horizontal lists with HTML tags feel free to comment below!

Also, Read: Removing the underline from a tag

Find us on Facebook

Leave a Comment