آموزش برنامه نویسی وب و مهارتهای مرتبط

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 2025 GMT +3:30

نحوه تنظیم لیست با تگ ul li در CSS

همان طور که در مطالب قبل از بخش آموزش مقدماتی CSS گفتیم، خاصیت های CSS قابلیت های بسیار خوبی برای سفارشی سازی ظاهر و شکل نمایش تگ های HTML در صفحات وب در اختیارمان قرار می دهند تا حدی که امروزه دیگر کسی به طراحی وب بدون استفاده از CSS فکر نمی کند، در ادامه آموزش ها این بار می خواهیم نحوه تنظیم شکل ظاهری تگ های ul و li که مربوط به ایجاد لیست در صفحات وب هستند را بررسی کنیم، یادآور می شویم که تگ ul و li برای ایجاد منوهای استاندارد و باب طبع موتورهای جستجو در سایت ها و وبلاگ ها و همچنین ایجاد نقشه ی HTML (بدون استفاده از XML) سایت کاربرد فراوان دارند.

ساختار لیست با تگ ul و li در HTML

قبل از اینکه به نحوه تنظیم تگ های ul و li با استایل CSS بپردازیم بد نیست نگاهی اجمالی داشته باشیم به نحوه استفاده از دو تگ ul و li در صفحات HTML که برای ایجاد ساختار لیست با زیر مجموعه به صورت درختی کاربرد دارند، مثال زیر نحوه چیدمان صحیح تگ ul و li را به صورت تو در تو نمایش می دهد:

<ul>
<li>لیست اصلی بدون زیر مجموعه</li>
<li>
لیست اصلی با زیر مجموعه
<ul><li>لیست فرعی و زیر مجموعه اول
<ul><li>لیست فرعی و زیر مجموعه دوم</li></ul>
</li></ul>
</li>
</ul>

توضیح:
- متال بالا منوی درختی از لیست های فرضی ترسیم می کند که در آن ابتدا یک لیست اصلی به عنوان بالاترین آیتم، سپس یک لیست اصلی دیگر در ادامه آن با دو لیست زیرمجموعه نمایش داده می شود.
- باید به نحوه چینش تو در توی تگ های ul و li دقت داشته باشیم، کوچکترین اشتباه در نحوه چینش صحیح تگ های ul و li ممکن است باعث نامعتبر شدن کدنویسی از لحاظ سرویس های اعتبار سنجی مانند validator.w3.org شود که از نظر سئو (SEO یا بهینه سازی صفحات وب برای موتورهای جستجو) فاکتوری منفی است.

تنظیم تگ ul با استایل CSS

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظيم تگ ul با استايل CSS</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
ul{
    list-style:none;
    list-style-image:url(list-item-image.jpg);
    list-style-position:outside;
}
</style>
</head>
<body>
<ul>
<li>ليست اصلي بدون زير مجموعه</li>
<li>
ليست اصلي با زير مجموعه
<ul><li>ليست فرعي و زير مجموعه اول
<ul><li>ليست فرعي و زير مجموعه دوم</li></ul>
</li></ul>
</li>
</ul>
</body>
</html>

برای مشاهده پیش نمایش آنلاین لطفا به انتهای این آموزش مراجعه کنید.
توضیح:
- خاصیت list-style شکل نمایش علامت مربوط به آیتم های لیست را تعیین می کند، مقادیر زیادی را می توانیم برای list-style در نظر بگیریم که در زیر فهرست وار برخی از مهم ترین و پرکاربردترین آنها را بررسی می کنیم:
inside: برای ایجاد نقطه هایی رو به داخل لیست (در برخی مرورگرها پشتیبانی می شود).
outside: ایجاد نقطه رو به بیرون لیست (در برخی مرورگرها پشتیبانی می شود).
circle: ایجاد نقطه های توخالی و گرد برای آیتم های لیست.
decimal: ایجاد آیتم های لیست به صورت شمارشی و زیر مجموعه بدون صفر (1، 2، 3 و...).
decimal-leading-zero: ایجاد آیتم های لیست به صورت شمارشی و زیرمجموعه ای به صورت اعداد به همراه صفر (01، 02، 03 و...).
square: ایجاد مربع های کوچک برای آیتم های لیست.
none: نمایش آیتم های لیست بدون هیچ گونه علامتی.
نکته: به جای list-style از list-style-type نیز استفاده می شود.
- خاصیت list-style-image برای تعریف یک تصویر به جای علامت های نقطه، مربع و... در آیتم های لیست کاربرد دارد که مقادیر آن با آدرس URL (نسبی یا مطلق) تصویر تکمیل می شود.
- خاصیت list-style-position نیز موقعیت آیتم ها را مشخص می کند، این خاصیت می تواند دو مقدار outside و inside داشته باشد.

تنظیم تگ li با استایل CSS

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تنظيم تگ ul و li با استايل CSS</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
ul{
    list-style:none;
    list-style-image:url(list-item-ul.png);
    list-style-position:inside;
}
.li-1{
    list-style:none;
    list-style-image:url(list-item-ul.png);
    list-style-position:inside;
    color: #c00;
}
.li-2{
    list-style:none;
    list-style-image:url(list-item-li.png);
    list-style-position:inside;
    color: #c08;
}
</style>
</head>
<body>
<ul>
<li class="li-1">ليست اصلي بدون زير مجموعه</li>
<li class="li-1">
ليست اصلي با زير مجموعه
<ul><li class="li-2">ليست فرعي و زير مجموعه اول
<ul><li class="li-2">ليست فرعي و زير مجموعه دوم</li></ul>
</li></ul>
</li>
</ul>
<hr>
در اين نمونه کد نحوه چينش صحيح تگ ul و li به صورت تو در تو و کاربرد کلاس CSS براي اعمال استايل ظاهري به تگ هاي HTML مشخص شده است.
</body>
</html>

پیش نمایش آنلاین
با دقت در پیش نمایش آنلاین نمونه کد هنگامی که برای تگ li ویژگی هایی تعریف می کنیم تگ ul نیز از آن پیروی می کند، در واقع تگ ul به تنهایی نمود ظاهری ندارد و آیتم های لیست نهایتا به صورت li نشان داده می شوند و ul صرفا برای تنظیم تو در توی آیتم ها کاربرد دارد.
در اینجا از دو کلاس فرضی li-1 و li-2 برای آیتم های سطح یک و سطح دو استفاده کرده ایم که پی بردن به نحوه تنظیم صحیح آنها نیاز به اندکی دقت و توجه به ترتیب چینش ها دارد.
نکته: ویژگی های قابل اعمال بر تگ های ul و li به موارد گفته شده محدود نمی شود، بر حسب نیاز در پروژه های طراحی وب می توانیم از خاصیت های دیگر از جمله padding و margin نیز استفاده کنیم.

دسته بندی: آموزش مقدماتی » CSS

برچسب ها: CSS

قبلی »

« بعدی

مطالب بیشتر:
کار با border و outline در CSS
سلکتور آی دی (ID) و کلاس (Class) در CSS
کاربرد خاصیت height و width در CSS
نحوه تنظیم استایل لینک (Link) در CSS
خاصیت Background و ویژگی های آن در CSS

دیدگاه

۳۷ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

ali

۲۱:۱۳ ۱۴۰۱/۱۰/۲۰

میخواستم حالت تصویر بدم بدون استفاده از list_style_image روشی هست بشه طراحی کرد

تا آنجا که اطلاع داریم در صورتی که بخواهید در سورس HTML از تگ ul استفاده کنید استفاده از list_style_image تقریبا ساده ترین راه استایل دهی به این تگ است، همچنین می توانیم به ul حالت display با مقدار block اختصاص دهیم و با background تصویر پس زمینه تنظیم کنیم.

fateme

۱۵:۲۸ ۱۴۰۰/۱۰/۱۱

سلام ممنون از سایت خوبتون
من سوالم اینه که چجوری داخل منو که با li هست لینک بزاریم تگه لطف کنید بگید ممنون میشم

لطفا عبارت "منو ul li" را در قسمت جستجوی سایت وارد کنید، مطلب اختصاصی در خصوص ساخت منو با تگ ul li و CSS به همراه تگ href و ایجاد لینک در سایت منتشر شده است.

Mori

۱۰:۲۰ ۱۳۹۹/۰۸/۱۰

سلام. میخواستم بدونم که چگونه در html میشه چند لیست عمودی رو کنار هم قرار داد. یعنی در واقع لیست ها زیر هم نباشند. (مکان قرارگیری لیست ها)

با اختصاص استایل به تگ ul به صورت display با مقادیر inline-block می توانیم لیست ها را در کنار هم در یک خط نمایش دهیم، مثال:

<style>
.ul-1, .ul-2, .ul-3 {
    display: inline-block;
	width: 200px;
	border: 1px solid #E5E5E5;
}
</style>
<ul class="ul-1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="ul-2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="ul-3">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

کافه کتاب

۱۴:۵۱ ۱۳۹۹/۰۴/۲۰

سپاس خیلی وقت بود دنبالش بودم مرسی از سایت عالیتون

آیدا

۲۲:۴۷ ۱۳۹۹/۰۴/۱۴

سلام
من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه چطور میتونید راهنمایی کنید ؟

اگر با مراجعه به سایت مرجع فیلم های آموزشی اشکالات همچنان پابرجا است می توانید برنامه Team Viewer را نصب و از طریق ایمیل ما (موجود در بخش تماس) اطلاع دهید تا هماهنگی در خصوص بررسی آنلاین از طریق این برنامه انجام شود.

حسین

۱۰:۳۰ ۱۳۹۷/۰۱/۳۱

سلام. چطور می تونم در تگ ol به جای ترتیب 1 و 2 و 3 از ترتیب a,b,c استفاده کنم؟

به دو روش می توانید این کار را انجام دهید، استفاده از list-style در CSS با مقادیر decimal یا استفاده از صفت type با مقدار عددی 1 برای تگ ol در HTML، به طور مثال:

<style>
.my-list {
	list-style:decimal;	
}
</style>
<ul class="my-list">
<li>آیتم لیست</li>
<li>آیتم لیست</li>
<li>آیتم لیست</li>
</ul>

<ol type="1">
<li>آیتم لیست</li>
<li>آیتم لیست</li>
<li>آیتم لیست</li>
</ol>

رعنا

۰۸:۳۱ ۱۳۹۶/۰۵/۰۳

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

در نمونه کدهای این آموزش از خاصیت list-style-image استفاده شده که می توانید الگوبرداری کنید.

alizz j

۲۱:۰۷ ۱۳۹۵/۰۹/۲۴

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

لطفا توضیحات مربوط به خاصیت list-style را در آموزش حاضر مطالعه کنید، همچنین برای اعمال تنظیمات بیشتر باید مباحث دیگر CSS از جمله padding و margin را فرا گرفته باشید.

علی

۲۰:۴۸ ۱۳۹۵/۰۸/۲۲

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

برای این کار باید از جاوا اسکریپت استفاده کنید، مثال:

<style>
#test{
	border:1px solid #949494;
	padding:4px;
	margin:4px;
}
.class{
	background:#A3E5D0;
	margin:4px;
}
</style>
<script>
function myFunction(id) {
    var tag = document.createElement("P");
    var text = document.createTextNode("your text!");
	tag.className = 'class';
    tag.appendChild(text);
    document.getElementById(id).appendChild(tag);
}
</script>
<div id="test"></div>
<input type="button" value="Click!" onclick="myFunction('test')">

محسن

۱۳:۳۵ ۱۳۹۴/۱۰/۲۵

سلام
استاد من چون تازه دارم با طراحی وب آشنا میشم بعضی از سوالاتم خیلی ابتدایی و مبهمه در این مورد از شما عذر می خوام ولی چاره ای ندارم اگه میشه به تمامی این سوالاتم پاسخ بدید
سوالم اینکه با توجه به این که شما در این مطلب دو مثال زدید و خروجی هردو یکسان بود پس چرا برای مثال دومی از دو کلاس li استفاده کردید

تصویر پس زمینه به کار رفته در کلاس li-1 با کلاس li-2 متفاوت است! همچنین با این کار می توانید خاصیت های دیگری برای هر کلاس تعریف و استفاده کنید، کدها صرفا جهت نمونه و فهم مطلب درج شده اند.

داوود

۱۲:۰۴ ۱۳۹۴/۰۹/۱۵

سلام استاد عزیزم؛
وقتتون بخیر.
استاد آیا ul همیشه لازمه که با li بیاد؟؟ یا بزارین اینجوری بگم! li میتونه به تنهایی و بدون استفاده از ul بیاد؟؟
علت سوالم به این خاطره: (البته راستش رو بخواین خیلی واجب و مهم نیست ولی جهت علاقه به دونستنش ازتون دارم میپرسم).
این کد رو ببینید استاد:

<body>
        <li><a class="button" href="#">for test button link</a></li>
  </body>

و حالا این تکه کد css مربوط به همین کد html رو:

.button {
    text-decoration: none;
    display: inline-block;
    padding: 20px 35px;
    border: 1px solid black;
    background-color: #ffd1fa;
}
li a.button {
    list-style: none;
    padding: 20px;
}

ببینید استاد الان من منظورم از این کد: li a.button اینه که بیا و آیکن یا همون Bullet icon (اگه درست گفته باشم) کنار li رو که بصورت پیش قرار میدی بیا بردار؛ ولی کد بالا درست عمل نمیکنه؛ در عوض این کد درست عمل میکنه: ببینید:

li {
    list-style: none;
}

البته همونطور که گفتم این مورد خیلی مهم نیست ولی میخواستم بدونم چرا اینجوری که به تنهایی تگ li رو نوشتم عمل کرده ولی زمانی که سفارشی کردم، عمل نکرد. آیا تو تعاریف سفارشی و مسیر دهی به li اشتباه کردم؟

- از نظر کدنویسی استاندارد یا Valid HTML Markup الزاما باید تگ li درون تگ ul یا ol استفاده شود، در غیر اینصورت ممکن است در مرورگرهای مختلف به شکل متفاوتی پردازش شود!
- در مورد مشکل دوم، سلکتور تنظیم شده تگ li را به عنوان عنصر هدف تنظیم نمی کند، قبلا هم گفته شد، دستور شما یعنی تگ a ای درون تگ li که کلاس button داشته باشد!

<style>
li a.button{
	font-size:36px;
}
</style>
<ul>
<li>
<a href="#" class="button">test!</a>
</li>
</ul>

داوود

۱۳:۱۷ ۱۳۹۴/۰۸/۲۷

سلام آقای مهندس؛
بسیار بسیار سپاسگزارم بخاطر پاسخگویی خوبتون.
استاد در اینجا که فرمودین:
الف - "در سلکتور li:hover a به سلکتور a مقدار 5 پیکسل خط حاشیه داده شده (زمانی که کاربر ماوس را روی محدوده li ببرد که در اینجا با محدوده a مشترک است)." میشه بگیم بنوعی داره collapse رخ میده یا نه تو اینجا این مورد صدق نمیکنه؟؟
ب - آقای مهندس انگار این دو تا کد با همدیگه فرقی ندارن؛ درست میگم!! اگه مثبته چرا؟؟ چون hover فقط روی a اثر میذاره اینجوریه یا نه به نوعی چون ما این دو تا رو با همدیگه تلفیق کردیم اینجوری شده.

li:hover a {
    border-right: 5px solid red;
}

و این یکی:

li a:hover {
    border-right: 5px solid red;
}

زمانی که برای li عرض و ارتفاع خاصی تعیین نمی کنید، در واقع تگ a که درون li است، با گرفتن padding فضای آن را پوشش می دهد (تگ li به اندازه مورد نیاز a گسترش می یابد) و به نوعی محدوده دو تگ یکی می شود (li لفاف a می شود)، لذا این طور به نظر می رسد که استایل های اعمال شده برای هر دو تگ مشترک عمل می کنند! توجه کنید که این قانون همیشه صادق نیست و بسته به اندازه های اعمال شده برای a و li ممکن است محدوده آنها متفاوت باشد، در کل بهترین حالت برای جلوگیری از سردرگمی این است که پس از آشنایی با اصول کلی، به صورت عملی و با آزمایش و خطا تفاوت را در چند مرورگر به طور هم زمان بررسی کنید!

داوود

۱۲:۳۵ ۱۳۹۴/۰۸/۲۶

سلام آقای مهندس؛
وقت بخیر. استاد تو این طراحی منو:

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

ul {
    list-style: none;
    overflow: auto;
}

li {
    float: right;
}

li a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
}

li:hover a {
    border-right: 5px solid red;
}

a:hover {
    padding-right: 10px;
}

و با این کد Html:

<ul>
          <li><a href="">لینک اول</a></li>
          <li><a href="">لینک دوم</a></li>
          <li><a href="">لینک سوم</a></li>
          <li><a href="">لینک چهارم</a></li>
          
      </ul>

میخواستم کاری کنم که وقتی ماوس میره روی لینکها، عبارت مورد نظر دیگه جابجا نشه. به این نتیجه رسیدم که باید مقدار padding از سمت راست رو دو برابر مقدار li:hover a بزارم. راستش رو بخواین هم میدونم چرا و هم نمیدونم چرا اینجوری میشه. امکانش هست بگید چرا باید دوبرابر باشه؟؟ آیا خود li هم یعنی داره از جایی میگیره padding رو؟؟ بذارین اینجوری بگم؛ مگه وقتی که من گفتم li من یه border به قطر 5 داشته باشه، خوب وقتی که hover میکنم عبارت لینک باید 5- تا بیاد سمت راست دیگه که تکون نخوره به نوعی و نره جلوتر، ولی الان با دو برابر مقدار مثبت به این نتیجه دست پیدا کردم. میشه دلیلشو بهم بگین؟؟ ممنونم ازتون.

- در سلکتور li a به تگ a مقدار padding برابر با 15 پیکسل داده شده (در حالت عادی از چهار جهت 15 پیکسل فضای خالی).
- در سلکتور li:hover a به سلکتور a مقدار 5 پیکسل خط حاشیه داده شده (زمانی که کاربر ماوس را روی محدوده li ببرد که در اینجا با محدوده a مشترک است).
- در سلکتور a:hover نیز مجدد 10 پیکسل padding به a در حالت hover داده شده که با میزان border قبلی می شود 15 پیکسل!

محسن

۱۲:۴۰ ۱۳۹۴/۰۶/۳۰

سلام مهندس خسته نباشید یه سوال خدمتتون دارم اینکه
من منو رو طراحی کردم زیرمنو هم عالی بالا میاد اما یه اسلایدر گذاشتم حالا وقتی منو hover میشه زیر منو زیر اسلایدر قرار می گیره می خوام روی اسلایدر قرار بگیره
ممنون میشم اگه کمکم کنید.

باید به بلاک اصلی منو خاصیت z-index (با یک مقدار بیشتر از z-index سایر عناصر) اضافه کنید.

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

داوود

۰۹:۳۰ ۱۳۹۴/۰۶/۰۹

سلام آقای مهندس؛ خیلی عذر میخوام که مجددا تکرار میکنم؛ حدس زدم شاید بخاطر تغییرات سرور ممکنه سوالم پاک شده باشه. در خصوص قسمت الف سوال قبلیم (عناصر موثر در عدم collapse شدن) امکانش هست در صورت امکان پاسخ رو مرقوم بفرمایین؟؟

پاسخ داده شده و در همین مطلب وجود دارد! سوال شما سه بخش بود که در پاسخ با علامت "-" در سه بخش مشخص است!

نخست

قبلی

بعدی

آخر

صفحه 1 از 3

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