Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Changing the Default Display Value Using CSS
Every element in CSS has a default display value and we can easily change. This is done by explicitly setting the display property value. We will first consider an Unordered list and will set it horizontally with inline.
Set the Unordered List With the Default Display
The following sets an unordered list. The default display i.e., vertical for a list is displayed here −
<ul> <li><a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a></li> <li><a href="https://www.tutorialspoint.com/python_data_science/index.htm" target="_blank">Python Data Science</a></li> <li><a href="https://www.tutorialspoint.com/python/index.htm" target="_blank">Python</a></li> <li><a href="https://www.tutorialspoint.com/csharp/index.htm">C#</a></li> <li><a href="https://www.tutorialspoint.com/artificial_intelligence/index.htm" target="_blank">Artificial Intelligence</a></li> </ul>
Change the Default Display
Now, we will change the default display of the unordered list using the display property with the value inline −
li {
display: inline;
}
Change the Default Display of an li Element
Example
Let us now see the example where we are setting inline display property value for the <li> element and create a horizontal menu −
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
li {
display: inline;
}
</style>
</head>
<body>
<h2>Tutorials List</h2>
<p>The following are the list of resources:</p>
<ul>
<li><a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a></li>
<li><a href="https://www.tutorialspoint.com/python_data_science/index.htm" target="_blank">Python Data Science</a></li>
<li><a href="https://www.tutorialspoint.com/python/index.htm" target="_blank">Python</a></li>
<li><a href="https://www.tutorialspoint.com/csharp/index.htm">C#</a></li>
<li><a href="https://www.tutorialspoint.com/artificial_intelligence/index.htm" target="_blank">Artificial Intelligence</a></li>
</ul>
</body>
</html>
Change the Default Display of an a Element
Let us now see the example where we are setting block display property value for the <a> element −
a {
display: block;
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
a {
display: block;
}
</style>
</head>
<body>
<h1>Our Tutorials</h1>
<a href="https://www.tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a>
<a href="https://www.tutorialspoint.com/python_data_science/index.htm" target="_blank">Data Science</a>
<a href="https://www.tutorialspoint.com/csharp/index.htm" target="_blank">C#</a>
</body>
</html>
Updated on: 2023-10-30T14:44:28+05:30
190 Views
Advertisements