추가 라인이 표시되어 이후 가장 긴 라인

나는이 웹 페이지에 다음과 같은 출력 (검은 색이 분야에 중요한 데이터가 들어 강조된) :추가 라인이 표시되어 이후 가장 긴 라인

이 Provider Screenshot

이 라인의 각은 항상 가장 긴 라인을 제외하고 올바르게 표시 뒤에 빈 줄이 하나 더 있습니다.

<div style="clear:both; white-space:nowrap;"> 
    <span style="float:left; margin-right:5px"> 
    <a class="provider" href="javascript:void(0)" 
     onkeypress="showProviderInfo(this, 'claim2')" 
      onclick="showProviderInfo(this, 'claim2')">[+]</a> 
    THE ENTRY WITH THE LONGEST NAME CAUSES AN EXTRA LINE TO DISPLAY BELOW IT... 
    </span> 
    <span style="float:right"> 
     <a href="javascript:void(0)" 
     onkeypress="openAddWindowForMedicalProvider('12345678')" 
     onclick="openAddWindowForMedicalProvider('12345678')"> 
    Create as Medical Provider 
    </a> 
    &nbsp; 
    <a href="javascript:void(0)" 
     onkeypress="openAddWindowForServiceProvider('12345678')" 
     onclick="openAddWindowForServiceProvider('12345678')"> 
    Create as Service Provider 
    </a> 
    </span> 
</div> 
<br />

가 어떻게 여분의 라인이 가장 긴 한 후 표시되지 않는이 같은 스타일을 지정할 수 있습니다 :

여기에 라인을 나타내는 코드는?

출처

2012-04-10 Zack Macomber

스타일 시트 및 완전한 독립 실행 형 예제가 없지만 5px 오른쪽 여백 (span = inline?)이 다음 줄로 줄 바꿈됩니까? – mikevoermans

CSS를 표시하거나 jsfiddle을 작성하십시오 –

CSS가 게시되었습니다 - 모두 인라인입니다 –

이것은, 그러나

을 jsfiddle.net 사용하여 나를 위해 잘 작동하는 것 같다 둘은 </ div> 및 <br /> 있습니다. div은 자동으로 새 줄을 가져 오므로 br이 중복되어 문제를 일으킬 수 있습니다.

또한 <span style="float:left; margin-right:5px">이 문제의 원인 일 수 있습니다. 수레와 여백은 항상 당신이 기대하는대로하지 않습니다. 어쩌면 padding-right으로 바꾸거나 간격을 완전히 없애고 그냥 커플  을 넣으면 작동 하는지를 확인하십시오.

어쨌든 스팬을 플로팅 할 필요는 없습니다.

여러 브라우저에서 테스트 해 보는 것도 도움이됩니다. 브라우저 일 수 있습니다. IE는 Firefox 또는 Chrome에서 제대로 작동하는 것을 엉망으로 만들 것입니다.

출처

2012-04-10 14:54:43 evan

입니다.
이 실제로 문제라고 생각합니다. 나는 그것들을 제거했고 선들 사이의 간격은 모두 균등하다. 그러나 지금은 모든 라인 이후에 갭이 있습니다. 반면에 모든 라인은 가장 긴 것을 제외하고는 서로 플러시됩니다.
. –

음수의 아래쪽 여백으로 조정할 수 있습니다. firefox for firefox를 사용해 보셨습니까? 그것은 당신이 당신이 원하는 방식으로 볼 수있는 페이지에 CSS로 재생하게됩니다. 또한 간격이 왜 그런지 파악하는 데 도움이됩니다. – evan

저는 IE 8 (우)에 대해 엄격하게 개발하고 있습니다 ... 나는 방화범에 대해 많이 들었으며 멋진 도구처럼 보입니다. –

추가 라인이 표시되어 이후 가장 긴 라인

답변

관련 문제