لیست ها - نامرتب (Unordered Lists) در HTML
لیست نامرتب یا Unordered List در HTML با تگ <ul> تعریف می شود. هر آیتم لیست با تگ <li> مشخص می شود. به صورت پیش فرض آیتم ها با دایره های سیاه کوچک نمایش داده می شوند.
لیست نامرتب ساده
در مثال زیر یک لیست نامرتب ساده ایجاد شده است:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>انتخاب نوع نشانگر با CSS
با استفاده از ویژگی list-style-type در CSS می توانید نوع نشانگر آیتم ها را تغییر دهید:
disc: دایره سیاه (پیش فرض)circle: دایره توخالیsquare: مربعnone: بدون نشانگر
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>لیست تو در تو
لیست ها می توانند به صورت تو در تو ساخته شوند. این روش برای دسته بندی آیتم ها مفید است.
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>نکته: یک آیتم لیست (<li>) می تواند شامل یک لیست دیگر یا حتی تصاویر و لینک ها باشد.
لیست افقی با CSS
با CSS می توانید لیست ها را به صورت افقی نمایش دهید. این تکنیک معمولاً برای ساخت منوهای ناوبری استفاده می شود.
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li { float: left; }
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>خلاصه
- برای تعریف لیست نامرتب از
<ul>استفاده کنید. - برای تعریف آیتم های لیست از
<li>استفاده کنید. - با
list-style-typeمی توانید نوع نشانگر را تغییر دهید. - لیست ها می توانند تو در تو باشند.
- می توان با CSS لیست افقی ساخت.
برای ادامه مطالعه به بخش لیست ها در HTML و لیست مرتب در HTML مراجعه کنید.