فهرست نامرتب (ul)
فهرست نامرتب (Unordered List) با تگ <ul> ساخته می شود. این فهرست گلوله ای است. یعنی هر مورد یک علامت ساده دارد. برای هر مورد از تگ «مورد لیست» یعنی <li> استفاده می کنیم.
تعریف و کاربرد تگ ul
تگ «ul» یک فهرست گلوله ای می سازد. همراه تگ «li» به کار می رود. برای فهرست ترتیبی از ol استفاده کن. برای هر مورد نیز از li کمک بگیر. استایل را می توانی با CSS تغییر دهی.
مثال: فهرست نامرتب ساده
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
سفارشی سازی نوع نشانه با CSS
می توانی نوع گلوله را عوض کنی. مثلاً دایره توخالی، توپر یا مربع. این کار با ویژگی list-style-type انجام می شود.
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type: square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
تنظیم فاصله خطوط در لیست
می توانی فاصله عمودی بین موارد را کم وزیاد کنی. از line-height کمک بگیر.
<ul style="line-height: 180%;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="line-height: 80%;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
لیست تو در تو (Nested List)
گاهی یک مورد خودش زیرلیست دارد. کافیست داخل «li» یک «ul» دیگر بگذاری.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul>
<li>Tea</li>
<li>Types</li>
<li>
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
</ul>
نمونه تو در تو پیشرفته
می توانی چند سطح تو در تو بسازی. اما خوانایی را نگه دار.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>
<ul>
<li>Black tea</li>
<li>Green tea</li>
<li>
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
</ul>
مقادیر پیش فرض CSS
مرورگرها برای «ul» تنظیمات پیش فرض دارند. می توانی آن ها را بازنویسی کنی.
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
نکته: اگر ظاهر خاص می خواهی، از CSS برای استایل دهی لیست ها استفاده کن.
راهنمای عملی سریع
- بین «ul» و «ol» انتخاب کن.
- هر مورد را با «li» بنویس.
- در صورت نیاز، استایل را با CSS تنظیم کن.
جمع بندی سریع
- ul فهرست گلوله ای می سازد.
- هر مورد داخل li قرار می گیرد.
- ظاهر گلوله با CSS قابل تغییر است.
- لیست تو در تو را داخل li بساز.