نحوه ایجاد یک لیست نامرتب در HTML [ مثالها]

قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.

نشانگر دایره

برای تغییر نشانگر مورد پیش‌فرض فهرست به دایره، ویژگی CSS list-style-type را روی «circle» تنظیم کنید.

قلم را ببینیدمثال لیست نامرتب HTML: نشانگر دیسکتوسط HubSpot (@hubspot) برCodePen.

نشانگر مربع

برای تغییر نشانگر پیش‌فرض آیتم فهرست به مربع، ویژگی CSS list-style-type را روی “square” قرار دهید.

قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.

بدون نشانگر

همچنین می‌توانید با تنظیم ویژگی CSS list-style بر روی «none»، نشانگر آیتم فهرست را به طور کامل حذف کنید. آیتم های لیست همچنان تورفتگی دارند، اما هیچ نشانگری قبل از آنها ظاهر نمی شود.

قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.

لیست تودرتو

شما می توانید یک لیست در داخل لیست دیگری ایجاد کنید – در غیر این صورت به عنوان یک لیست تودرتو شناخته می شود – در HTML. شما می توانید یک لیست نامرتب یا مرتب را در یک لیست نامرتب قرار دهید، اما ما روی اولی تمرکز خواهیم کرد زیرا موضوع این پست لیست های نامرتب است.

برای ایجاد یک لیست نامرتب تو در تو، به سادگی دومین لیست نامرتب را زیر یک آیتم لیست در اولین لیست نامرتب اضافه کنید. این فهرست دوم نیز باید حاوی یک والد باشد

• • عنصر و فرزند 
    • عناصر. شما باید بسته شدن را درج کنید

تگ کنید یا مرورگر همه موارد لیست زیر را به صورت تودرتو ارائه می کند.

قلم را ببینیدمثال لیست نامرتب HTML: تودرتوتوسط HubSpot (@hubspot) برCodePen.

لیست تورفتگی سفارشی

HTML

• • برچسب به صورت پیش‌فرض موارد فهرست خود را فرورفته می‌کند. اگر می خواهید

فاصله تورفتگی را تغییر دهید

• • ، سپس می توانید از ویژگی CSS margin-left یا padding-left استفاده کنید. یک مقدار مثبت آیتم های لیست را به سمت راست فشار می دهد، در حالی که یک مقدار منفی موارد را به سمت راست فشار می دهد.

قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.

فهرست افقی

به‌طور پیش‌فرض، آیتم‌های فهرست به‌صورت عمودی فهرست می‌شوند، اما می‌توانید با مقداری CSS آنها را به‌صورت افقی نمایش دهید. این اغلب هنگام ایجاد یک منوی ناوبری یک انتخاب محبوب است.

مثال زیر لیستی از عناصر لنگر را به صورت افقی نمایش می دهد. CSS به عنصر لیست نامرتب اعمال می شود تا نشانگرهای آیتم های لیست را حذف کند و حاشیه، بالشتک و رنگ پس زمینه را تنظیم کند. ویژگی سرریز نیز  روی “مخفی” تنظیم شده است تا هرگونه سرریز از رندر خارج از کادر عنصر پنهان شود.

هر آیتم لیست توسط ویژگی float CSS تعریف می شود و روی “چپ” تنظیم می شود تا در سمت چپ ظرف خود شناور شوند (یعنی عنصر لیست نامرتب).

در نهایت، هر عنصر لنگر توسط CSS به گونه‌ای استایل داده می‌شود که به صورت پررنگ، وسط، آبی سرمه‌ای و بدون زیرخط به نظر برسد. ویژگی نمایش  و padding  تضمین می کند که بین هر آیتم لیست فاصله وجود دارد .

قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.