Blaze UI is a CSS-based UI library that provides a great structure for building websites quickly with a scalable and maintainable foundation. In this article, we will learn about the Blaze UI Lists Inline component. This component is used to make your list items flow left to right, instead of appearing from top to bottom.
Blaze UI Lists Inline Used Class:
- list–inline: This class will act as a modifier to make list items in a single line.
Syntax:
<ul class="c-list c-list--inline">
<li class="c-list__item">List-Item</li>
</ul>The below examples will demonstrate this component.
Example 1: In this example, the unordered list is an inline list.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Blaze UI Lists Inline</h3>
<ul class="c-list c-list--inline">
<li class="c-list__item">Geeks</li>
<li class="c-list__item">for</li>
<li class="c-list__item">Geeks</li>
</ul>
</body>
</html>
|
Output:
Example 2: In this example, the unordered inline list is nested within an ordered list.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Blaze UI Lists Inline</h3>
<ol>
<li>Fruits</li>
<ul class="c-list c-list--inline">
<li class="c-list__item">Orange</li>
<li class="c-list__item">Banana</li>
<li class="c-list__item">Apple</li>
</ul>
<li>Vegetables</li>
<ul class="c-list c-list--inline">
<li class="c-list__item">Ladyfinger</li>
<li class="c-list__item">Tomato</li>
<li class="c-list__item">Potato</li>
</ul>
<li>Colours</li>
<ul class="c-list c-list--inline">
<li class="c-list__item">Red</li>
<li class="c-list__item">Green</li>
<li class="c-list__item">Yellow</li>
</ul>
<li>City</li>
<ul class="c-list c-list--inline">
<li class="c-list__item">Delhi</li>
<li class="c-list__item">Moradabad</li>
<li class="c-list__item">Lucknow</li>
</ul>
</ol>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/lists/#inline