دستگاه ها

لیست شماره گذاری شده نمونه هایی از طراحی شیک لیست های ul li CSS سبک پیش فرض

لیست ها را می توان شماره گذاری یا بدون شماره گذاری کرد.

لیست های شماره گذاری شده با کد خروجی می شوند:

نقطه 1
نقطه 2
نقطه 3

لیست های بدون شماره با کد زیر نمایش داده می شوند:

نقطه 1
نقطه 1
نقطه 1

هر مورد در هر لیست در یک تگ li محصور شده است. همه موارد لیست در یک تگ مشترک ul یا ol قرار می گیرند. سبک های این تگ ها در شیوه نامه نوشته شده است.

به هر تگ سبک های طراحی خاصی اختصاص داده شده است. آنها تورفتگی هایی را از متن نشان می دهند.

برای یک لیست شماره گذاری شده، سبک های شماره گذاری برای هر مورد مشخص می شود.

اعداد استاندارد عربی با مقدار اعشاری توصیف می شوند.

list-style-type: اعشاری; /*اعداد عربی*/

برای یک لیست گلوله ای، سبک کاراکتر - مربع یا دایره را مشخص کنید.

list-style-type: حلقه; /*دایره ها*/
list-style-type: مربع; /*مربع*/

به هر آیتم منو می توان یک تصویر اختصاص داد.

list-style-image: url('path to image');

به طور معمول، در قالب ها، یک لیست شماره دار با اعداد ساده و یک لیست بدون شماره با مربع و دایره سیاه قالب بندی می شود. خسته کننده و بی بیان است. بیایید این را درست کنیم.

استایل های لیست نوشته شده در قالب بیست یازده کجا هستند؟

فایل style.css را باز کنید. بخشی به نام /* عناصر متن */ را پیدا کنید

کد استاندارد به شکل زیر است:

چگونه یک لیست شماره دار ایجاد کنیم؟

لیست شماره گذاری شده با استفاده از پس زمینه

به این طراحی لیست شماره گذاری شده زیبا نگاه کنید.

دوست دارم؟ بیایید تکرار کنیم.

سبک هایی را برای تگ ol پیدا کنید. خواص جدیدی به آن اضافه کنید.

Ol ( بالشتک: 0px 0 0 20px؛ حاشیه: 0.5em 0 1.571em 1.9em؛ رنگ: #2E2E2E؛ نوع فهرست: هیچکدام؛ فونت: 15px/17px Verdana، Arial، Helvetica، sans-index; z- : 2; تنظیم مجدد: نقطه; نقطه 1: 24px پس زمینه: #BDC3C7;

برای اینکه بفهمید کجا و چه چیزی باید متناسب با طراحی خود تغییر دهید، بیایید این کد را تکه تکه کنیم.

list-style-type: هیچکدام; - خروجی اعداد استاندارد را غیرفعال می کند
ضد تنظیم مجدد: نقطه; - یک متغیر برای شمارنده شماره گذاری تنظیم می کند
موقعیت: نسبی; - شماره گذاری مکان ها در کنار خود موارد

before یک عنصر شبه برای تگ ol li است. دارای سبک های زیر:
محتوا: counter(point); - مقدار یک متغیر را نمایش می دهد
افزایش متقابل: نقطه 1; - شمارنده را 1 افزایش می دهد
موقعیت: مطلق;
پس زمینه: #BDC3C7; - پس زمینه اعداد (پس زمینه را می توان با یک رنگ یا یک نماد زیبا تنظیم کرد
حاشیه - حاشیه های خارجی
بالشتک – بالشتک داخلی
رنگ - رنگ متن عنصر
پس زمینه - پس زمینه
text-align – تراز متن
وزن قلم – ضخامت قلم (اشباع)

در سبک های خود، می توانید هر رنگ، تراز، اندازه فونت و تورفتگی را تنظیم کنید.

لیست شماره گذاری شده با یک تصویر منحصر به فرد برای هر مورد

سایت یک زنانه لیست های شماره گذاری شده بسیار جذابی دارد.

این چگونه اجرا می شود؟ بیایید به کد زیر نگاه کنیم:

/*نخستین شماره*/ ol li:first-child ( list-style-image: url(مسیر به تصویر با شماره 1)؛ ) /*scond number*/ ol li:nth-child(2n) (list-style- image: url(مسیر به تصویر با شماره 2) /*شماره سوم*/ ol li:nth-child(3n) (list-style-image: url(مسیر به تصویر با شماره 3); ) /*; شماره چهارم */ ol li:nth-child(4n) ( list-style-image: url(مسیر تصویر با عدد 4)؛ ) /*بعد دقیقاً همان را فقط برای شماره آیتم های بعدی می نویسیم*/

در کد چنین لیست شماره گذاری شده ای، باید تمام شماره آیتم ها را فهرست کنید و به هر یک از آنها یک نماد منحصر به فرد اختصاص دهید.

اگر از 20 مورد شماره گذاری شده در لیست ها در مقالات استفاده می کنید، باید nth-child(An) را 20 بار بنویسید. به طوری که شبه کلاس nth-child(20n) در استایل ها آخرین رتبه را دارد.

خطوطی را در فایل styles که طراحی لیست شماره گذاری شده را توصیف می کند (برچسب های ol li) پیدا کنید.

شبه کلاس فرزند اول را به آن اضافه کنید. یک بار آن را کپی و پیست کنید، سپس این ویژگی را به nth-child(An) تغییر دهید و هر تعداد عددی را که می خواهید کپی کنید تا نماد خودش را داشته باشد. شماره اقلام را وارد کنید

برای هر عدد، ویژگی list-style-image را با نماد منحصر به فرد خود اضافه کنید.

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

چگونه یک لیست گلوله ای (بدون شماره) ایجاد کنیم؟

لیست گلوله شده ul li با نمادهای متناوب

من این لیست گلوله ای را خیلی دوست داشتم.

Ul ( بالشتک: 11px 0 5px 0; ) ul li ( بالشتک-سمت چپ: 32px؛ حاشیه-پایین: 10px؛ قلم: معمولی 15px Verdana، sans-serif؛ رنگ: #2E2E2E؛ ارتفاع خط: 1.6؛ حاشیه-پایین: 1px padding-bottom: 10px ul li:fore ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 27px؛ ارتفاع: 24px؛ حاشیه-بالا: -2px؛ پس زمینه: url. ("images/sprite.jpg") 0px 2px no-repeat list-style: circle ) ul li:nth-child(2n):قبل از محتوا: ""؛ موقعیت: مطلق؛ عرض: 27px; : 43px حاشیه سمت چپ: -35px: url("images/sprite.jpg") 0px -17px no-repeat;

به‌جای نوع استاندارد list-style، می‌توانید ویژگی «path to the icon» را اختصاص دهید - list-style-image:url. اما پس از آن باید یک حاشیه سمت چپ خارجی را از لبه های سایت مشخص کنید - بدون آن، نمادها نمایش داده نمی شوند و از منطقه محتوا فراتر می روند.

برای آزمایش، می توانید تورفتگی ها را اختصاص دهید:

Ul li(list-style-image: url(images/radio.png)؛ حاشیه سمت چپ: 30px؛ )

تناوب نمادها را می توان با ویژگی nth-child(An) تنظیم کرد. مثال بالا از شبه عنصر قبل استفاده می کند.

کد شامل یک شبه کلاس nth-child (2n) است. مقدار آن 2 است. معلوم می شود که هر نقطه زوج با نماد دیگری مطابقت دارد. اگر به جای 2n 2n+1 بنویسید، نماد دیگری در نقاط فرد ظاهر می شود.

برای هر آیتم لیست، می توانید یک خط زیر مشخص کنید. در مثال بالا، نقاط با خطوط نقطه چین خط کشیده شده اند.

همچنین می‌توانید قاب‌ها، پس‌زمینه‌ها و نمادها را به هر آیتم اختصاص دهید. فقط زیاده روی نکنید. هدف ما این نیست که همه را با یک طراحی فانتزی منفجر کنیم، بلکه بهبود کیفیت درک محتوا است.

چگونه چندین لیست با طرح های مختلف را در یک صفحه نمایش دهیم؟

گاهی اوقات لازم است چندین لیست با سبک های مختلف قرار دهید.

اگر سبک های مشترکی را اختصاص دهید، طرح یکسان به همه لیست ها اختصاص داده می شود. لیست های متفرقهاگر یک شناسه جداگانه به تگ ol یا ul اختصاص دهید و آن را در حالت html ویرایش مقاله وارد کنید، قابل نمایش است. خوب، در فایل style برای این id باید استایل های جداگانه بنویسید.

برای مثال، یکی از گزینه های طراحی محتوا خوب است:

در HTML لیست را به صورت زیر می نویسید:

نقطه 1
نقطه 2
نقطه 3

در CSS شما می توانید سبک هایی مانند این را بنویسید:

Ol#sod( بالشتک: 0px 20px 10px 51px؛ حاشیه: 0.5em 0 0em 1em؛ رنگ: #2E2E2E؛ نوع فهرست: هیچکدام؛ پس‌زمینه: #f1f4f5؛ حاشیه سمت چپ: #BDC3C7 4px- توپر؛ نمایشگر در خط: block;

سبک جدید در طراحی تگ ol با سبک اصلی متفاوت است: پس زمینه، سبک نمایش، خط سمت چپ محتوا.

با استفاده از چندین لیست از طرح های مختلف در متن، ارائه اطلاعات را جذاب تر خواهید کرد. هنگام فهرست کردن هر آیتمی، می‌توانید برخی از نمادها را تنظیم کنید، و هنگام فهرست کردن اقدامات، می‌توانید نمادهای مختلفی را تنظیم کنید. در اینجا طراحی فقط با تخیل شما محدود می شود.

این روش ها در طراحی آیتم های منو، سرفصل ها و هر عنصر دیگر سایت نیز قابل اجرا هستند.

چگونه لینک های لنگر را در لیست محتوا ایجاد کنیم؟

چگونه آنها را در کد HTML بنویسیم؟ یک قطعه کد لنگر لینک را قاب می کند و یک قطعه کد دیگر در کنار مکانی قرار می گیرد که هنگام کلیک بر روی لینک باید به آنجا هدایت شویم.

سرفصل 1
سرفصل 2
سرفصل 3

و در متن مقاله باید این را بنویسید:

عنوان 1… عنوان 2… عنوان 3…

شاید وب مسترهای با تجربه تر بتوانند در مورد چیزی من را اصلاح کنند. من به سادگی آنچه را که خودم در عمل امتحان کرده ام توصیه می کنم.

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

آگیوا ورونیکا.

شما همچنین ممکن است علاقه مند باشید:

توضیحات

صفات

reversed: مشخص می کند که عناصر لیست به ترتیب نزولی (به جای ترتیب صعودی) باشند. مقادیر ممکنویژگی بولی:

توجه: ویژگی معکوس فقط پشتیبانی می شود مرورگرهای کرومو سافاری

Start: مقدار صحیح شروع را تنظیم می کند که از آن شماره گذاری عناصر در لیست شروع می شود.

1 - Example » type: نوع نشانگر مورد استفاده برای آیتم های لیست را تعریف می کند: (1, 2, 3, 4 ...).
اعداد اعشاریالف
- حروف لاتین به ترتیب حروف الفبا با حروف بزرگ (A, B, C, D...).الف - حروف لاتین به ترتیب حروف الفبا، درحروف کوچک
(الف، ب، ج، د...).من
- اعداد رومی با حروف بزرگ (I, II, III, IV ...).من

مثال »

همچنین از ویژگی های جهانی و رویدادها پشتیبانی می کند

ol (نمایش: بلوک؛ نوع فهرست: اعشاری؛ حاشیه-بالا: 1em؛ حاشیه-پایین: 1em؛ حاشیه-چپ: 0؛ حاشیه-راست: 0؛ بالشتک-چپ: 40 پیکسل؛ )

مثال
قهوه
چای

مثال
قهوه
چای

تگ های HTML

معنی و کاربرد

(مخفف انگلیسی

- لیست سفارش داده شده). هر عنصر لیست با یک تگ شروع می شود

(عنصر فهرست).

پشتیبانی از مرورگر			صفت		اپرا	IExplorer
لبه	شروع، تایپ	شروع، تایپ	شروع، تایپ	شروع، تایپ	شروع، تایپ	شروع، تایپ
بله	شروع، تایپ	شروع، تایپ	شروع، تایپ	شروع، تایپ	معکوس شد	معکوس شد

صفات

پشتیبانی از مرورگر	خیر	معنی
توضیحات	توضیحات	فشرده در HTML5 پشتیبانی نمی شود. مشخص می کند که لیست باید کوچکتر از اندازه معمولی باشد (ارتفاع خط: 80٪).
	بله	مشخص می کند که ترتیب در لیست شماره گذاری شده (مرتب شده) باید نزولی باشد. این ویژگی توسط مرورگرها پشتیبانی نمی شود اینترنت اکسپلوررو لبه.
شروع کنید	شماره	مقدار شروع یک لیست شماره گذاری شده (مرتب شده) را تعریف می کند. مقادیر باید اعداد صحیح باشند، مقادیر منفی مجاز هستند. هنگامی که با حروف استفاده می شود (نوع = "A" و نوع = "a")، عدد مشخص شده در مقدار مشخصه، عدد ترتیبی حرف در الفبا است. برای مثال، start = "4" با حرف مطابقت دارد "د"و لیست با او شروع خواهد شد. هنگام استفاده از مقدار start = "27"، شمارنده به صفر تنظیم می شود و لیست دو رقمی می شود ("27" = "AA"، "28" = "AB"، "29" = "AC". .).
نوع	1 (پیش فرض) یک (بزرگ) یک (حروف کوچک) من (رومی بزرگ) من (کوچک رومی)	نوع گلوله ای را که در ساخت لیست شماره گذاری شده (مرتب شده) استفاده می شود را مشخص می کند.

مثال استفاده

مثال استفاده از تگ <ol> <span>

نکته اولنکته دوم
نکته سوم

در صفحه به شکل زیر خواهد بود:

نکته اول
نکته دوم.
نکته سوم.

اگر می خواهید لیست از یک عدد خاص (نه از 1) شروع شود، باید ویژگی start را برای تگ مشخص کنید.

به عنوان مثال:

یکی دیگر از ویژگی های جالب نوع است که به شما امکان می دهد شماره گذاری الفبایی ("A" - بزرگ، "a" - حروف کوچک) یا شماره گذاری اعداد رومی ("I" - بزرگ، "i" - حروف کوچک) را مشخص کنید.

بیایید به مثالی نگاه کنیم که تمام مقادیر ممکن را برای ویژگی type (به غیر از مقدار پیش‌فرض) ارائه می‌کند:

مثالی از استفاده از ویژگی type یک تگ HTML<оl>

نکته اولنکته دوم
نکته سوم

نکته اولنکته دوم
نکته سوم

نکته اولنکته دوم
نکته سوم

نکته اولنکته دوم
نکته سوم

لطفاً توجه داشته باشید که ایجاد لیست‌های شماره‌دار (مرتب شده) تودرتو در فهرست‌های شماره‌دار دیگر (داخل عنصر فهرست) مجاز است.

نمونه ای از یک لیست شماره گذاری شده در یک لیست شماره گذاری شده دیگر <span>

نکته اول

نکته اولنکته دوم
نکته سوم
نکته سوم

در صفحه به این صورت خواهد بود.

لیست های HTMLبرای گروه بندی اطلاعات مرتبط استفاده می شود. سه نوع لیست وجود دارد:

لیست گلوله ای —

با نشانگر مشخص شده است،
لیست شماره گذاری شده —
1. با یک عدد مشخص شده است
  فهرست تعاریف- - از جفت ترم تشکیل شده است
  —
  تعریف
  هر لیست محفظه ای است که عناصر لیست یا جفت های تعریف اصطلاح در آن قرار دارند. عناصر لیست مانند عناصر بلوک عمل می کنند که در زیر یکدیگر قرار گرفته اند و کل عرض بلوک کانتینر را اشغال می کنند. هر مورد لیست دارای یک بلوک اضافی است که در کنار آن قرار دارد که در طرح بندی شرکت نمی کند.
  
  ایجاد لیست های HTML
  
  1. لیست گلوله ای
  
  لیست گلوله اییک لیست نامرتب است (از فهرست نامرتب انگلیسی). با استفاده از یک تگ جفت ایجاد شده است
  . نشانگر یک عنصر لیست یک برچسب است، به عنوان مثال، یک دایره پر.
  مرورگرها به طور پیش فرض قالب بندی زیر را به بلوک لیست اضافه می کنند:
  هر عنصر لیست با استفاده از یک تگ جفت ایجاد می شود
2. (از مورد فهرست انگلیسی).
- مایکروسافت
- گوگل
- اپل
برنج. 1. لیست گلوله ای
2. لیست شماره گذاری شده

لیست شماره گذاری شدهبا استفاده از یک تگ جفت ایجاد می شود. هر مورد لیست نیز با استفاده از عنصر ایجاد می شود
. مرورگر به طور خودکار عناصر را به ترتیب شماره گذاری می کند و اگر یک یا چند عنصر از چنین لیستی را حذف کنید، اعداد باقی مانده به طور خودکار مجدداً محاسبه می شوند.
بلوک لیست همچنین دارای سبک های پیش فرض مرورگر است:
ویژگی مقدار در دسترس است، که به شما امکان می دهد شماره پیش فرض را برای آیتم فهرست انتخاب شده تغییر دهید. به عنوان مثال، اگر برای اولین مورد در لیست تنظیم کنید

، سپس شماره گذاری باقیمانده نسبت به مقدار جدید مجدداً محاسبه می شود.

برای برچسب زدن

پشتیبانی از مرورگر	توضیحات، ارزش پذیرفته شده
معکوس شد	ویژگی reversed باعث می شود که لیست به ترتیب معکوس نمایش داده شود (مثلاً 9، 8، 7...).
شروع کنید	ویژگی start مقدار اولیه را مشخص می کند که شماره گذاری از آن آغاز می شود، به عنوان مثال، یک ساخت اولین مورد به شماره سریال "10" اختصاص می یابد. شما همچنین می توانید نوع شماره گذاری را در همان زمان مشخص کنید، به عنوان مثال، .
نوع	ویژگی type نوع نشانگر مورد استفاده در لیست (حروف یا اعداد) را مشخص می کند. مقادیر پذیرفته شده: 1 - مقدار پیش فرض، شماره دهی. A - شماره گذاری لیست به ترتیب حروف الفبا، حروف بزرگ (A، B، C، D). a - شماره گذاری لیست به ترتیب حروف الفبا، حروف کوچک (a، b، c، d). I - شماره گذاری در اعداد بزرگ رومی (I، II، III، IV). i - شماره گذاری در اعداد کوچک رومی (i، ii، iii، iv).

مایکروسافت
گوگل
اپل

3. فهرست تعاریف

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

بلوک لیست تعریف دارای سبک های مرورگر پیش فرض زیر است:

برای برچسب ها

و

موجود .

کارگردان:: پیتر توچیلین
بازیگران:: آندری گایدولیان; الکسی گاوریلوف; ویتالی گوگونسکی; ماریا کوژونیکوا

برنج. 3. فهرست تعاریف

4. لیست تو در تو

اغلب، قابلیت‌های فهرست‌های ساده کافی نیست، برای مثال، هنگام ایجاد فهرست مطالب، هیچ راهی برای انجام آن وجود ندارد اقلام تو در تو. نشانه گذاری برای لیست تودرتو به صورت زیر خواهد بود:

نقطه 1.
نقطه 2.
- بند 2.1.
- بند 2.2.
  - بند 2.2.1.
  - بند 2.2.2.
- بند 2.3.
نکته 3.

برنج. 4. لیست تو در تو

5. فهرست شماره گذاری چند سطحی

یک لیست چند سطحی برای نمایش آیتم های لیست در سطوح مختلف با تورفتگی های مختلف استفاده می شود. نشانه گذاری برای یک لیست شماره گذاری چند سطحی به صورت زیر خواهد بود:

پاراگراف
پاراگراف
1. پاراگراف
2. پاراگراف
3. پاراگراف
  1. پاراگراف
  2. پاراگراف
  3. پاراگراف
4. پاراگراف
پاراگراف
پاراگراف

این نشانه گذاری پیش فرض یک شماره گذاری جدید برای هر لیست تو در تو ایجاد می کند که با یک شروع می شود. برای ایجاد شماره گذاری تو در تو، باید از ویژگی های زیر استفاده کنید:
counter-reset یک یا چند شمارنده را بازنشانی می‌کند و مقداری که باید تنظیم شود را مشخص می‌کند.
counter-increment مقدار افزایش شمارنده را مشخص می کند. هر آیتم بعدی با چه افزایشی شماره گذاری می شود.
محتوا - محتوای تولید شده، در این حالت وظیفه نمایش شماره قبل از هر آیتم لیست را بر عهده دارد.

Ol ( /* شماره گذاری استاندارد را حذف کنید */ list-style: هیچ؛ /* شمارنده را شناسایی کنید و نام آن را li کنید. مقدار شمارنده مشخص نشده است - به طور پیش فرض 0 */ counter-reset: li; ) li :before ( /* عنصری را تعریف می کنیم که شماره گذاری می شود - li شبه عنصر قبل نشان می دهد که محتوای درج شده با استفاده از ویژگی content قبل از آیتم های لیست قرار می گیرد. مقدار افزایش شمارنده در اینجا تنظیم می شود (پیش فرض 1 است. */ counter-increment: li / * خاصیت content تعداد آیتم های لیست را نشان می دهد () به این معنی که متن تولید شده مقادیر همه شمارنده ها را با آن نام نشان می دهد بین اعداد، و یک نقطه با فاصله قبل از محتوای هر آیتم لیست اضافه می شود */ content: counters(li,".")
برنج. 5. فهرست شماره گذاری چند سطحی

وظیفه

نمایش یک لیست گلوله به صورت افقی بدون گلوله.

راه حل

مثال » لیست گلوله ای

به صورت عمودی بالای یکدیگر برای ایجاد عناصر ناوبری، در برخی موارد نمایش دادن لیست به صورت افقی راحت است. راه های مختلفی برای دستیابی به این نمایش لیست وجود دارد.

باید بدانید که HTML دارای عناصر بلوکی و درون خطی است. عناصر درون خطی بلوک های خود را ایجاد نمی کنند . عناصر بلوک در یک خط جدید نمایش داده می شوند و یک بلوک مستطیلی ایجاد می کنند، نمونه ای از این برچسب ها
یا
بنابراین این برچسب است
همچنین یک عنصر بلوک است.

برای تگ کردن
مانند یک عنصر بلوک رفتار نمی کند، می توانید از CSS برای درون خط کردن آن استفاده کنید.

نمایش ویژگی CSS تعیین می کند که چگونه عنصر در سند نمایش داده شود. بیایید سه معنی آن را در نظر بگیریم (اگرچه بیشتر وجود دارد):

بلوک - عنصر به عنوان یک عنصر بلوک نمایش داده می شود.

inline - عنصر به صورت درون خطی نمایش داده می شود.

inline-block - block-line element، در ادامه در مورد این نوع عنصر بیشتر بخوانید، ما از آن استفاده خواهیم کرد.

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

نقطه 1

نقطه 2

نکته 3

بنابراین، این سبک کار کرد و ما یک چیدمان افقی از آیتم های لیست را دریافت کردیم:
شکل 1. مثال شماره 1 در محل کار.
این روش دارای معایبی است. واقعیت این است که عناصر درون خطی در مقایسه با عناصر بلوک محدودیت هایی دارند. به عنوان مثال، نمی توان به آنها عرض و ارتفاع داد، اما بلوک ها می توانند.

به عنوان مثال، ما نیاز داریم که عنصر منویی که ایجاد می کنیم، عرض 150 پیکسل و ارتفاع آن 40 پیکسل باشد. بیایید سعی کنیم سبک را به شکل زیر تغییر دهیم، یعنی دو قانون اضافه کنیم که اندازه آیتم منو را تعیین می کند:

این ویرایش ها منجر به هیچ تغییری نخواهد شد. برای اینکه آیتم های منو به صورت افقی قرار گیرند و بتوانند عرض و ارتفاع خود را تنظیم کنند، باید نوع را روی بلوک درون خطی تنظیم کنند. بیایید کد مثال خود را تغییر دهیم:
به صورت افقی فهرست کنید

نقطه 1

نقطه 2

نکته 3

این کد کار می کند و تغییرات قابل مشاهده است:

شکل 2. مثال شماره 2 در عمل.
اما ممکن است گزینه های مختلفی وجود داشته باشد، برای مثال باید لیست های تودرتو را در منو نمایش دهیم:
لیست تو در تو.

ویرایش کنید

لغو کنید

برش دهید

کپی کنید

درج کنید

تایپ فیس

پررنگ

مورب

زیر خط کشیده شد

اندازه

کوچک

عادی

میانگین

بزرگ

این هم نتیجه این کد:

شکل 3. مثال شماره 3 در محل کار.
می بینیم که بلوک ها از نظر ارتفاع آنطور که می خواهیم تراز نیستند. البته، می‌توانید ارتفاع یکسانی را برای همه بلوک‌ها تعیین کنید، اما همیشه مقدار دقیق آن را از قبل نمی‌دانیم و می‌تواند تغییر کند.

اما در واقع، چرا این اتفاق می افتد؟

بلوک های ما دارای یک ویژگی نمایش هستند که روی inline-block تنظیم شده است. این بدان معنی است که آنها ویژگی هایی مانند عناصر بلوک(قابلیت تعیین عرض و ارتفاع) و عناصر درون خطی. آنچه ما می بینیم کیفیت عناصر درون خطی است.

بیایید به رشته ای با کاراکترهای "A" در اندازه های مختلف نگاه کنیم:

A A A A A A A

می بینیم که همه حروف به صورت عمودی در امتداد خط پایین تراز شده اند. به طور دقیق تر، در امتداد خط پایه، اما اجازه دهید اکنون وارد علف های هرز نشویم. بنابراین، در مورد بلوک های ما نیز همین اتفاق افتاد.

برای تراز کردن متن به صورت عمودی، از ویژگی vertical-align استفاده کنید. در مثال شماره 3 خود، باید از مقدار top استفاده کنیم، که مرز بالایی عنصر را با بالای بلندترین عنصر در خط تراز می کند.

در حال حاضر اجازه دهید آن را به رشته ای با کاراکترهای "A" در اندازه های مختلف اعمال کنیم:

A A A A A A A

به نظر می رسد حروف کمی "پرش" دارند. من مرز CSS را روی بلندترین حرف تنظیم کردم تا نشان دهم که در واقع هیچ جهشی وجود ندارد، فقط فضای بین مرز بالایی (محل تراز کردن) و بالای "A" خالی است.

ویژگی vertical-align باید برای هر عنصر درون خطی اعمال شود، این ویژگی به ارث نمی رسد. می توانید درباره این ویژگی بیشتر بخوانید: vertical-align .

پس از این انحراف، به قرار دادن عناصر لیست به صورت افقی ادامه می دهیم.

راه دوم

با استفاده از ویژگی float می توانید آیتم های لیست را به صورت افقی قرار دهید. این ویژگی مشخص می کند که عنصر در کدام سمت تراز است و دارای دو موقعیت است: چپ و راست.

در اینجا یک مثال با استفاده از این کد آورده شده است:
به صورت افقی فهرست کنید

نقطه 1

نقطه 2

نکته 3

این هم نتیجه کد:
شکل 4. نمونه کار.
به نظر می رسد مثال کار می کند. اما یک اخطار در استفاده از این ویژگی وجود دارد. اکنون به آن نگاه خواهیم کرد. برای مثال، بیایید کدی را در نظر بگیریم که در آن دو کد وجود دارد لیست افقیبا به روش های مختلفچیدمان عناصر به صورت افقی: نمایش و شناور:
به صورت افقی فهرست کنید

نقطه 1

نقطه 2

نکته 3

نقطه 1

نقطه 2

نکته 3

این هم نتیجه کد:
شکل 5. نمونه کار.
در این مثال ها ظروف لیست
دارای حاشیه قرمز با ضخامت 1 پیکسل. اما لیست بالا که از ویژگی نمایش استفاده می کند، شامل موارد لیست است. اما عناصر یک لیست ایجاد شده با استفاده از ویژگی float از ظرف خود خارج می شوند.

در نگاه اول همه چیز کار می کند. اما بیایید لیست هایمان را عوض کنیم. بیایید لیست با کلاس menu-1 را قبل از لیست با کلاس menu-2 در کد قرار دهیم (اکنون پایین تر است).

این چیزی است که در نتیجه بدست می آوریم:
شکل 6. مثال در حال اجرا.
موارد موجود در منوی پایین نیز در اطراف منوی بالا قرار می گیرند، زیرا اثر ویژگی float لغو نشده است و برای همه عناصر بعدی اعمال می شود.

چگونه این مشکل را حل کنیم؟

برای انجام این کار، باید از ویژگی clear استفاده کنید، در صورتی که دارای مجموعه خاصیت float باشد، قرار گرفتن عنصر در اطراف عنصر دیگر را لغو می کند.

در اینجا یک مثال اصلاح شده با استفاده از ویژگی clear آورده شده است:
به صورت افقی فهرست کنید

نقطه 1

نقطه 2

نکته 3

نقطه 1

نقطه 2

نکته 3

مشاهده می شود که لیست پایین دیگر دور لیست بالایی قرار نمی گیرد، عناصر روی یکدیگر قرار نمی گیرند. اما در لیست اول برچسب ها وجود دارد
هنوز در خارج از ظرف قرار دارند
.
شکل 7. نمونه کار.
علاوه بر این، در کار همیشه نمی دانیم کدام عنصر با استفاده از float عنصر را دنبال می کند. گزینه ایده آل این است که عملیات ویژگی float را در همان بلوکی که در آن باز است، ببندید.

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

نقطه 1

نقطه 2

نکته 3

نقطه 1

نقطه 2

نکته 3

اکنون ما 100٪ کد کار داریم.
شکل 8. نمونه کار.
این تکنیک با ویژگی float معمولاً هنگام طراحی وب سایت ها برای تراز کردن ستون های ایجاد شده توسط برچسب ها استفاده می شود
. به این ترتیب یک ساختمان معمولی از ستون ها با تراز ارتفاع مورد نیاز بدست می آوریم. هنگامی که ما یک منو ایجاد می کنیم، در بیشتر موارد ارتفاع بلوک ها برای ما مهم نیست، تقریبا همیشه یکسان است. بنابراین استفاده از قانون (نمایش: inline-block) در این موارد کاملاً موجه است.

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