2013-03-15 3 views
2

ExtJs에 제목 표시 줄이 있으며 여기에 사용자 이름이있는 div가 있습니다. 제목 표시 줄의 오른쪽에 'float : right;'와 (과) 함께 표시 할 수 있습니다. 하지만 FF에서는 텍스트가 줄을 따라 떨어지며 Chrome에서는 괜찮습니다.플로트 : 오른쪽 텍스트를 FF로 내림

HTML :

<span unselectable="on" class="x-panel-header-text x-panel-header-text-default" id="programList_header_hd-textEl">Program Access permissions (TestResetValidity)<div class="programusername">Test Reset Validity</div></span> 

CSS :

그들뿐만 아니라 크롬 (아래) 모든 브라우저에서 같은 줄을 내가 얻을 수있는 방법
.programusername { 
    position: relative; 
    float: right; 
    margin-right: 70px; 
} 

enter image description here

?

enter image description here

+1

'.programusername'에'position : relative'가 있기 때문에'margin-right : 70px;'를'right : 70px;'로 변경할 수 있습니다. –

답변

3

첫째로 overflow: hidden;을 추가 span 같은 인라인 요소에 div 같은 블록 요소를 넣어하지 않습니다.

다른 div에 올바른 텍스트를 넣고 div#programusername 뒤에 넣으면 수정됩니다.

또한 상대 위치로 변경할 필요가 없습니다.

마지막으로 다른 페이지 요소를 옮기는 것을 방지하기 위해 float로 라이닝하는 요소 뒤에 <div style="clear: both;">을 넣으십시오.

1

이 시도 :

.programusername { 
    position: relative; 
    float: right; 
    margin-right: 70px; 
    display: inline-block; 
} 
2

시도 부모 모두의 <span>

관련 문제