راه حل مشکل نمایش عکس در لیست ها؟
مثال زیر در تمام مرورگرها به طور یکسان نمایش داده می شود:
مثال (راه حل مشکل نمایش عکس در لیست ها)
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
خودتان امتحان کنید »{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
توضیح مثال بالا:
- ul:
- با تنظیم خصوصیت list-style-type با مقدار "none" علامتگذاری، حذف خواهد شد.
- Padding و margin را با مقدار 0px تنظیم می کنیم(برای سازگاری بیشتر یا compatibility)
- li:
- خصوصیت background-image با آدرس عکس و البته بدون تکرار تنظیم می شود.
- جای که می خواهید عکس قرار گیرد در خصوصیت background-position تنظیم شده است.(چپ 0px و پایین 5px)
- مکان متن آیتم (</li>متن<li>) در خصوصیت padding-left تنظیم شده است.(برای لیست های فارسی باید خصوصیت padding-right تنظیم شود)
