مشکل لیست های تودرتو در حالت RTL

امروز داشتم با لیست ها کار میکردم و میخواستم چندتا لیست رو به صورت تودرتو ایجاد کنم راست چین باشن!!!

اولش اومدم و یه سری لیست به صورت زیر ایجاد کردم : (پیش نمایش رو میتونید از اینجا ببینید)

دستورات بالا یه لیست تودرتو رو نشون میده , اگه پیش نمایش رو نگاه کنید متوجه میشید قضیه از چه جریانه , این لیست الان چپ به راست هست یعنی اون نقطه های کنار لیست (بولت بهشون میگن) سمت چپ هر نوشته واقع شده!! حالا اگه بخوام که نقطه ها رو بیارم سمت راست نیاز دارم تا direciton رو به صورت rtl بدم که کد من به صورت زیر خواهد شد: (پیش نمایش رو میتونید از اینجا ببینید)

اگه پیش نمایش کد بالا رو ببینید متوجه میشید در حالتی که direction رو بر روی rtl قرار میدم لیست اون فرورفتگی و بیرون زدگی خودشو که در حالت پیش فرض داره رو از دست میده!!! حالا اگه بخوام که این فرو رفتگی توی لیست در حالت rtl رو دوباره ایجاد کنم باید چیکار کنم؟ 😐

من اومدم و با چند خط دستور ساده ی CSS اون فرورفتگی های لازم رو توی لیست های خودم به وجود اوردم (پیش نمایش رو از اینجا میتونید ببینید) :

در کد بالا من از padding استفاده کردم!!! همین padding ساده باعث میشه که لیست من در حالت rtl (راست به چپ) مثل شکلی که در حالت ltr (چپ به راست) داره نمایش داده بشه 😀 به همین راحتییییییییی , شما میتونید با دستکاری عدد جلوی padding میزان فرورفتگی لیست رو تنظیم کنید , هرچه عدد بزرگتر باشه فرورفتگی لیست بیشتر خواهد بود.

امیدوارم که از این اموزش ساده لذت برده باشید و اگه با لیست ها در حالت rtl مشکل دارید مشکل شما رو حل کرده باشم. دوستانی که سوال دارند میتونن از بخش نظرات مطرح کنند تا پاسخ بدم. موفق باشید.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟