Horizontal List with CSS

#	Content	Views
1.	Tutorial Tags	37,059
2.	Tutorial + Programming	1,061,888
3.	Videos	353,246
4.	Results (`Annual + Re-appear`)	44,863
5.	Quiz Chapters	37,081
6.	Quiz Questions	540,074
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,245
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,477
13.	Downloads (Syllabus)	2,638

Home
HTML
Lists
Horizontal List With Css

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

<!DOCTYPE html>
<html>
<head>
<title>Horizontal List with CSS</title>
<!-- Below Link is External CSS -->
<!-- <link rel="stylesheet" href="/html/css/style_horizontal.css">-->
</head>
<body>
<h3>Horizontal List with CSS</h3>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#contact">Students</a></li>
  <li><a href="#about">Contact</a></li>
</ul>

<h3>Navigation Menu</h3>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>
<p>ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਨੈਵੀਗੇਸ਼ਨ ਮੀਨੂ ਬਣਾਉਣ ਲਈ,  Unordered List ਨੂੰ  Horizontal ਰੂਪ ਵਿੱਚ ਸਟਾਈਲ ਕਰਨ ਲਈ CSS ਦੀ ਵਰਤੋਂ  ਕੀਤੀ ਹੈ।</p>
 

</body>
</html>

Live Demo & Try it yourself!

Output

YouTube » » https://www.youtube.com/watch?v=Am4tTIgQsWw

#HTML #lists #ordered list #lower case #upper case

CSPunjab.Com

Horizontal List with CSS

« Previous

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

<!DOCTYPE html>
<html>
<head>
<title>Horizontal List with CSS</title>
<!-- Below Link is External CSS -->
<!-- <link rel="stylesheet" href="/html/css/style_horizontal.css">-->
</head>
<body>
<h3>Horizontal List with CSS</h3>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#contact">Students</a></li>
  <li><a href="#about">Contact</a></li>
</ul>

<h3>Navigation Menu</h3>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>
<p>ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਨੈਵੀਗੇਸ਼ਨ ਮੀਨੂ ਬਣਾਉਣ ਲਈ,  Unordered List ਨੂੰ  Horizontal ਰੂਪ ਵਿੱਚ ਸਟਾਈਲ ਕਰਨ ਲਈ CSS ਦੀ ਵਰਤੋਂ  ਕੀਤੀ ਹੈ।</p>
 

</body>
</html>