كنت أحاول إضافة محتوى إلى حاوية المخطط الزمني للجوال.
هناك منفذان في هذه الحاوية.
before-topic-progress و after-topic-progress.
يتم تغليف before-topic-progress بـ <span> ولا أرى سببًا لذلك. ![]()
الحاوية ليست مضمنة، ولا أرى أي سبب لضرورة تغليف هذا المنفذ بقوة بعلامة span. ليس لها غرض واضح وتتداخل مع تخطيط المحتوى الخاص بنا. على سبيل المثال، إذا أردنا إدراج زر، فلن يتمكن الزر من مطابقة ارتفاعات العناصر الأخرى بسبب علامة span هذه:

لا أرى أي طريقة أنيقة لحل هذا. الطريقة الأكثر مباشرة هي استخدام شيء مثل
#topic-progress-wrapper > span:first-child {
display: flex;
}
ولكن إذا استخدمت مكونات إضافية أو مكونات متعددة نفس المنفذ، فإن فرض flex على العنصر الأب يمكن أن يفسد نمط المحتوى الآخر (حالة حافة، على ما أعتقد).
إذا لم يكن لعلامة span هذه أي غرض، فهل يمكن إزالتها من هذا الملف؟