يبدو أن المشكلة تكمن في الطريقة التي تم فيها تصميم الصفحة وتنسيق العناصر بها. في الصفحة التي رابطتني إليها، يتم استخدام أنماط CSS (أو ما يعرف بالـ CSS styles) لتحديد كيفية عرض العناصر على الصفحة. عند فحص الصفحة، يمكنني أن أرى أن العنصر
-
-
-
(الفقرة) يتم تحديد عرضهم بواسطة الأنماط التالية:
css#page-content .content h3, #page-content .content p {
display: inline;
}
هذا يعني أنه تم تعيين عرض هذه العناصر ليكون على شكل متسلسل (inline) بدلاً من عنصر كتلة (block)، وهو الأمر الذي يجعلها تعرض بجانب بعضها البعض بدلاً من أن تكون كل عنصر في سطر منفصل. لحل المشكلة وجعل هذه العناصر تعرض كعناصر كتلة، يمكنك تغيير الأنماط لتكون كالتالي:
css#page-content .content h3, #page-content .content p {
display: block;
}
بتغيير display إلى block، ستجعل هذه العناصر تعرض كعناصر كتلة، وبالتالي كل عنصر سيكون في سطر منفصل عن الآخر. يمكنك تجربة هذا التغيير في الأنماط ورؤية كيف تؤثر على عرض الصفحة.
المزيد من المعلومات
بالطبع! عندما يتم تحديد عرض عنصر HTML بـ display: inline;، فإن ذلك يجعل العنصر يتصرف كعنصر متسلسل. وهذا يعني أنه سيتم عرض العنصر داخل السطر نفسه، دون أن يحجز سطرًا كاملاً لنفسه. على الجانب الآخر، عندما يتم تحديد عرض العنصر بـ display: block;، فإنه يتصرف كعنصر كتلة، وهذا يعني أنه سيحجز سطرًا كاملاً لنفسه وسيعرض في سطر منفصل عن العناصر الأخرى.
في الحالة التي ذكرتها، إذا كنت ترغب في تغيير عرض العناصر
ليكون على شكل كتلة، يمكنك استخدام الأنماط التالية:
css#page-content .content h3, #page-content .content p {
display: block;
}
يجب وضع هذه الأنماط في ملف CSS الخاص بالموقع، أو داخل عنصر
