How to create Horizontal List

To make a Horizontal List in CSS is pretty easy. You can simple do this by using “display: inline”. I am gonna show you how.

<!doctype html>
<htm>
    <head>
        <style>
            .parent {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .child {
                display: inline;
                border: 1px dashed green;
                background: #eee;
                padding: 5px 15px;
            }
        </style>
    </head>
    <body>
        <ul class="parent">
            <li class="child">List 1</li>
            <li class="child">List 2</li>
            <li class="child">List 3</li>
            <li class="child">List 4</li>
        </ul>
    </body>
</htm>

You can copy/paste this code or Just add “display: inline” in your li class and then see.