How to prevent line breaks in the list of items using CSS?
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:
<!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:
Supported Browsers: The browser supported by CSS display property are listed below:
- Apple Safari 3.1
- Google Chrome 4.0
- Firefox 3.0
- Opera 7.6
- Internet Explorer 8.0
Please Login to comment...