Float List Items to the right with CSS



To float the list items to the right, use float: right property in CSS. You can try to run the following code to implement it,

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <style>          ul {             list-style-type: none;             margin: 0;             padding: 0;          }          li {             float: left;          }          li a {             display: block;             padding: 8px;             background-color: orange;          }       </style>    </head>    <body>       <ul>          <li><a href = "#home">Home</a></li>          <li><a href = "#news">News</a></li>          <li style = "float:right"><a href = "#contact">Contact</a></li>          <li style = "float:right"><a href = "#about">About</a></li>       </ul>    </body> </html>
Updated on: 2020-06-23T14:50:35+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements