The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items.
Syntax:
element {
display:inline-block;
}
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>preventline break in list items</title>
<style>
li {
display:inline-block;
text-decoration:underline;
}
h1 {
color:green;
}
h1, h2 {
text-align:center;
}
body {
width:70%;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>display:inline-block;</h2>
<b>Subjects Of Computer science:</b>
<ul>
<li>Computer Network</li>
<li>Operating System </li>
<li>Data Structure using C</li>
<li>Object Oriented Programming Concepts</li>
<li>Digital Electronics</li>
</ul>
</body>
</html>
|
Output:
