div 내의 span 클래스?

나는 2 줄의 텍스트를 같은 줄에 하나는 왼쪽에, 다른 하나는 오른쪽에 넣으려고합니다.div 내의 span 클래스?

CSS :

.topbar { 
    background-image:url(images/bar_bg.png); 
    height:62px; 
} 

.topbar span{ 
    font-family:Arial; 
    font-weight:bold; 
    font-size:15px; 
    color:#494963; 
    margin: 0; 
    padding-left:280px; 
    padding-top:15px; 
} 

.topbar span.left{ 
    font-family:Arial; 
    font-size:15px; 
    color:#494963; 
    margin: 0; 
    padding-right:380px; 
    padding-top:15px; 
}

HTML :

<div class="topbar"> 
    <span class="left">Contact Us or Come see us at our Branch</span> 
    <span>11 HIGH STREET, TOWN CENTER, Bristol, BA140IO </span> 
</div>

출처

2012-07-23 Spike

당신은 스팬의 CSS를 설정 할 수 있습니다 : 스팬이 포함 된 CSS 파일이있는 부모 DIV 또는 유사한 문제에서 블록 표시를 상속

display: inline-block !important;

내가 했어 문제 스팬 표시 유형 기본값을 변경했습니다.

인라인 블록으로 설정하면 스팬이 부동 소수점을 사용하지 않고 예상대로 표시됩니다. 개인적으로 나는 가능하다면 수레를 피하려고 노력한다. 이 div and span: display = 'block', 'inline', or 'inline-block' ?

출처

2012-07-23 20:30:42

좋은 대안. – JAB

IE를 특별히 지우거나 특별한 경우가 없기 때문에이 방법을 더 자주 사용합니다. –

이 float 속성을 사용! :]

span { 
float: right; 
} 

span.left { 
float: left; 
}

는 (필요한 경우 취소하는 것을 잊지 마세요!) 실제로

출처

2012-07-23 20:23:41

그래도 난 화면의 가장자리에 그들을 원하지 않는 :

여기에 좋은 레이아웃이 일을 생각하는 방법의 예는? 그래서 패딩을 사용했습니다. – Spike

패딩을 부모 요소에 적용합니다. –

@ user1411322 그러면 'div'크기를 적절하게 조절하십시오. – JAB

매우 간단합니다. CSS float 속성을 활용해야합니다.

http://jsfiddle.net/4cTFP/

출처

2012-07-23 20:25:02 JAB

div 내의 span 클래스?

답변

관련 문제