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>
            .parent {
                margin: 0px;
                padding: 0px;
                list-style: none;
            .child {
                display: inline;
                border: 1px dashed green;
                background: #eee;
                padding: 5px 15px;
        <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>

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