모바일 타임라인 컨테이너에 콘텐츠를 추가하려고 했습니다.
이 컨테이너에는 두 개의 아웃렛이 있습니다.
before-topic-progress와 after-topic-progress입니다.
before-topic-progress는 <span>으로 감싸져 있는데, 그 이유를 모르겠습니다. ![]()
컨테이너는 인라인이 아니며, 이 아웃렛을 span으로 강제로 감쌀 이유가 보이지 않습니다. 명확한 목적이 없으면서도 자체 콘텐츠 레이아웃에 간섭을 일으킵니다. 예를 들어 버튼을 삽입하려고 하면 이 span 때문에 버튼이 다른 요소들의 높이에 맞출 수 없습니다:

이를 해결할 우아한 방법을 찾지 못했습니다. 가장 직접적인 방법은 다음과 같은 것을 사용하는 것입니다.
#topic-progress-wrapper > span:first-child {
display: flex;
}
하지만 여러 플러그인이나 컴포넌트가 동일한 아웃렛을 사용하는 경우, 부모 요소에 flex를 강제하면 다른 콘텐츠의 스타일이 깨질 수 있습니다(경우에 따라 다르겠지만요).
이 span에 목적이 없다면, 이 파일에서 제거할 수 있을까요?