How To Display List Of Items In horizontal Menus Using CSS

Posted By Bajarangi soft , Posted On 03-11-2020

We can view list of items into horizontal view of list using html and css ,So today we discuss how to do it.

How To Display List Of Items In horizontal Menus Using CSS

Step 1:Create index.html file and implement as below code in it.

<ul>
    <li><a href="#" target="_blank">HTML</a></li>
    <li><a href="#" target="_blank">CSS</a></li>
    <li><a href="#" target="_blank">JavaScript</a></li>
    <li><a href="#" target="_blank">Java</a></li>
    <li><a href="#" target="_blank">Python</a></li>
</ul>

Step 2:Implement CSS code as below to display horizontal menus.

<style>
    body {
        background: #2e9ad0;
    }
    li {
        display: inline;
        font-size: 30px;
    }
</style>

Complete Code For Displaying List Of Items In horizontal Menus Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Display List Of Items In horizontal Menus Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<style>
    body {
        background: #2e9ad0;
    }
    li {
        display: inline;
        font-size: 30px;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Display List Of Items In horizontal Menus Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <ul>
            <li><a href="#" target="_blank">HTML</a></li>
            <li><a href="#" target="_blank">CSS</a></li>
            <li><a href="#" target="_blank">JavaScript</a></li>
            <li><a href="#" target="_blank">Java</a></li>
            <li><a href="#" target="_blank">Python</a></li>
        </ul>
    </div>
    <br>
</div>
</body>
</html>