اذهب إلى المحتوى
  • 0

تغيير اتجاه عناصر html باستخدام css

Salman Bin Mohammed

السؤال

Recommended Posts

  • 0
بتاريخ 26 دقائق مضت قال SaLMaN 1:

اريد تغير مكان الوسم li بحيث بدال مايكون في اليمين يكون في اليسار 

هناك العديد من الطرق لفعل ذلك, يمكننا فعل ذلك باستخدام html عن طريق اعطاء العنصر ul الخاصية dir والتي تقوم بتغيير اتجاه الصفحة من اليمين الى اليسار أو العكس, لاحظ الكود التالي

    <nav>
        <ul dir="rtl">
            ^^^^^^^^^^
            <li><a href="">k1</a></li>
            <li><a href="">k2</a></li>
            <li><a href="">k3</a></li>
        </ul>
    </nav>

هذه الخاصية سوف تقوم بتغيير اتجاه العنصر ul وجميع العناصر التي يحتويها من اليسار الى اليمين, اذا أردت العكس يمكنك اعطاءها قيمة ltr كالتالي

    <nav>
        <ul dir="ltr">
            <li><a href="">k1</a></li>
            <li><a href="">k2</a></li>
            <li><a href="">k3</a></li>
        </ul>
    </nav>

يمكنك أيضا فعل ذلك عن طريق css باستخدام خاصية direction كالتالي

<!-- Html -->
    <nav>
        <ul>
            <li><a href="">k1</a></li>
            <li><a href="">k2</a></li>
            <li><a href="">k3</a></li>
        </ul>
    </nav>


<!-- css -->
    <style>
        nav{
            direction: rtl;
        }
    </style>

ويمكنك أيضا تغيير القيمة الى ltr كالتالي

    <style>
        nav{
            direction: ltr;
        }
    </style>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

كما وضح محمد عواد فيمكنك إستخدام الصفة dir في عناصر html حيث dir اختصار لكلمة direction بمعنى اتجاه وبهذه الصفة تقوم بتحديد اتجاه العنصر الذي قمت بوضعها فيه.

يمكنك وضع rtl وهي اختصار right to left أي يمين الى اليسار لتحديد اتجاه العنصر بهذا الاتجاه

أو يمكنك وضع ltr وهي اختصار left to right أي يسار الى اليمين لتحديد العنصر بهذا الاتجاه

الخيارين السابقين يقوما بتحديد الاتجاه للعنصر مهما كان نوع محتوه وبأي لغة.

أما إذا كان لديك صفحة تحتوي لغات متعددة فليس من الجيد وضع صفة اتجاه العنصر لكل كتابة موجودة في الصفحة بحسب نوع اللغة ، فيمكنك ببساطة وضع الخيار الثالث وهو auto بمعنى تلقائي لكي يقوم المتصفح بوضع إتجاه العناصر بشكلٍ تلقائي بحسب لغة العنصر ، ويمكنك على سبيل المثال وضعها في العنصر الرئيسي html كالآتي

<html dir="auto">
  ...
</html>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...