You can display the list items horizontally by changing the display property of the <li> tag to inline. You can use the following files to test this:

C# 8.0 and .NET Core 3.0 – Modern Cross-Platform Development: Build applications with C#, .NET Core, Entity Framework Core, ASP.NET Core, and ML.NET using Visual Studio Code, 4th Edition
ASP.NET Core 3 and Angular 9: Full stack web development with .NET Core 3.1 and Angular 9, 3rd Edition
C# in Depth, 4th Edition

File test.css

ul.horiz li {

display: inline;


File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”


<html xmlns=”” lang=”en-US”>


<title>How to display a list horizontally with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />



<ul class=”horiz”>

<li><a href=”#”>List item one</a></li>

<li><a href=”#”>List item two</a></li>

<li><a href=”#”>List item three</a></li>

<li><a href=”#”>List item four</a></li>

<li><a href=”#”>List item five</a></li>




The next picture shows the result:


Displaying a list horizontally with CSS

Displaying a list horizontally with CSS