webdevlinux - logo Web Dev Linux

අනු ලැයිස්තු (Nested Lists)

මෙම කොටසේදී අනු ලැයිස්තු හෙවත් ලැයිස්තු තුල ලැයිස්තු සාදන ආකාරය පිළිබඳ අධ්‍යයනය කරමු.

Nesting HTML Lists Nesting Lists

පහත උදාහරණය අත්හදා බලන්න.

FILE : nesting-lists.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Nesting HTML Lists</title>
</head>
<body>
<!-- nesting unordered lists -->
<ul>
	<li>Vehicles
		<ul>
			<li>Car</li>		
			<li>Van</li>		
		</ul>	
	</li>
</ul>

<!-- ordered lists inside an unordered list -->
<ul>
	<li>Sunday
		<ol>
			<li>Wash Cloths</li>		
			<li>Wash Vehicle</li>		
		</ol>	
	</li>
	<li>Monday
		<ol>
			<li>Getup</li>	
			<li>Get ready</li>	
			<li>Go to work</li>	
		</ol>	
	</li>
</ul>

<!-- nesting ordered lists -->
<ol>
	<li>Main List
		<ol type="a">
			<li>Sub list
				<ol type="i">
					<li>Item 1</li>				
					<li>Item 2</li>				
				</ol>			
			</li>		
		</ol>	
	</li>
</ol>

</body>
</html>

වැදගත්

මතක තබාගත යුතු කරුණු නම් අනු ලැයිස්තුව ඇතුලත් විය යුත්තේ ප්‍රධාන ලැයිස්තුවේ li element එක තුල බවයි.

වැරදි ආකාරය

<ol>
 <ul>
  <li>Sub item</li>
 </ul>
</ol>

නිවැරදි ආකාරය

<ol>
  <li>
    <ul>
      <li>Sub item</li>
    </ul>
  </li>
</ol>

අපට ඕනෑම ආකාරයක ලැයිතුවක් තුල ඕනෑම ආකාරයක ලැයිස්තුවක් අනු ලැයිස්තුවක් ලෙස භාවිතා කල හැකිය.