HTML Horizontal or Inline Lists

HTML Lists क्या होती हैं?

HTML Lists का उपयोग related items को list के रूप में दिखाने के लिए किया जाता है।
By default, lists vertical होती हैं, लेकिन CSS की मदद से इन्हें horizontal या inline बनाया जा सकता है।

HTML में मुख्य रूप से दो lists होती हैं।
Unordered List (<ul>)
Ordered List (<ol>)

Horizontal या Inline List क्या होती है?

Horizontal या Inline List वह list होती है जिसमें list items एक के नीचे एक नहीं, बल्कि एक ही line में side by side दिखाई देते हैं।

इनका use अक्सर किया जाता है।
Navigation menus
Footer links
Category lists
Social media icons

Default HTML List Behavior

Default रूप से list vertical होती है।

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

CSS से Horizontal List बनाना

List को horizontal बनाने के लिए CSS का उपयोग किया जाता है।

<ul class="menu">
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

.menu li {
  display: inline;
}

इससे सभी list items एक line में आ जाते हैं।

Inline-Block का उपयोग

inline-block ज्यादा control देता है।

.menu li {
  display: inline-block;
  margin-right: 15px;
}

यह spacing और width control करने में मदद करता है।

Navigation Menu के लिए Horizontal List

Navigation menu बनाने का common तरीका।

<nav>
  <ul class="nav-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu li {
  display: inline-block;
  margin-right: 20px;
}

Bullet Points हटाना

Horizontal lists में bullets remove करना common practice है।

ul {
  list-style-type: none;
}

Flexbox से Horizontal List बनाना

Modern CSS में Flexbox सबसे बेहतर तरीका है।

.menu {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
}

Flexbox responsive layouts के लिए ज्यादा suitable होता है।

Ordered List को Horizontal बनाना

Ordered list को भी horizontal बनाया जा सकता है।

<ol class="steps">
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol>

.steps li {
  display: inline-block;
  margin-right: 15px;
}

Inline List with Separators

Links के बीच separator दिखाने के लिए CSS का उपयोग किया जाता है।

.inline-list li::after {
  content: "|";
  margin-left: 10px;
}

.inline-list li:last-child::after {
  content: "";
}

Accessibility Considerations

List structure हमेशा <ul> या <ol> में ही रखें।
Sirf <span> या <div> से list बनाना avoid करें।
Screen readers lists को बेहतर तरीके से समझ पाते हैं।

Horizontal या Inline Lists की Best Practices

Navigation के लिए <nav> tag का use करें
Bullets हटाने के लिए CSS का उपयोग करें
Flexbox को prefer करें
Spacing CSS से control करें
HTML structure semantic रखें