중첩 된 범위 포장

저는 요리법 웹 사이트를 만들고 있으며 목록에 추가 된 재료 목록을 보관하려고합니다. span 내에서 텍스트와 글꼴 멋진 아이콘으로 span 요소를 사용하고 있습니다. 문제는 컨테이너의 끝 부분에 도달하면 스팬 요소 사이가 아니라 텍스트와 아이콘 사이에서 스팬이 깨지는 것입니다. 내 스팬 요소는 다음과 같이 중첩 :중첩 된 범위 포장

<span class="element"><i class="fa fa-times"><span>eggs</span></span>

내가 요소가 열 내부에 남아 있지만 아이콘과 텍스트 사이에 휴식하지 싶습니다. 나는 공간을 낭비 할 것이므로 그것들을 모두 별도의 줄에두기를 원하지 않는다. 여기에 내 문제를 보여주는 바이올린이 있습니다 : https://jsfiddle.net/Lccduy5m/3/

저는 정말 어떤 도움을받습니다.

출처

2016-06-15 Diana Ruth

white-space: nowrap; 추가 또는 당신은 당신이 여기서 일하는 볼 수 .element에 display: inline-block;을 사용할 수 https://jsfiddle.net/xLf4zm6j/

출처

2016-06-15 20:25:37

내가 그 전에 시도했다 때문에 내가 함께 놀았 실패와 스팬 요소가 모두 뭔가 이상한 ... 발견 자신의 라인에서 작동하지만, 같은 라인에있을 때는 그렇지 않습니다. [https://jsfiddle.net/zk4vke58/1/](https://jsfiddle.net/zk4vke58/1/) 어떻게 해결할 수 있습니까? –

대안은'.element'가'display : inline-block; '이지만, IE7 이하는 기본적으로 지원되지 않을 것입니다. https://jsfiddle.net/vbb5anaf/ –

트릭을 만든 것처럼 보입니다. 그리고 오래된 브라우저에 대해 걱정할 필요가 없으므로이 수정 사항이 좋을 것입니다. 정말 고마워! –

답변

관련 문제