CSS - 절대 위치 지정을 할 때 워드 스페이싱이 작동하지 않습니다.

div와 일부 스팬이 있습니다. 절대 위치 지정을 사용할 때 word-spacing 속성이 제대로 작동하지 않는다는 문제점이 있습니다.CSS - 절대 위치 지정을 할 때 워드 스페이싱이 작동하지 않습니다.

더 많은 공간을 확보하려면 here이 jsFiddle입니다.

HTML :

<section id="header"> 
    <span>HOME</span> 
    <span class="no-spacing">ABOUT US</span> 
    <span>PORTFOLIO</span> 
    <span class="no-spacing">CONTACT US</span> 
</section>

CSS :

html, body{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

#header { 
    width: 100%; 
    height: 30%; 
    background-image: url(http://www.7daysinhavana.com/wordpress/wp-content/themes/7days/images/commun/back_header_global.jpg); 
    font-family: 'GarageGothicBlackRegular'; 
    word-spacing: 20px; 
    font-size: 25px; 
    text-align: center; 
    position: relative; 
} 

#header span { 
    position: absolute; 
    bottom: 0px; 
} 

.no-spacing { 
    word-spacing: 0px; 
}

가 어떻게 그 오류를 해결할 수 있습니까?

도움을 주시면 매우 감사하겠습니다.

출처

2013-06-18 Mohammad Areeb Siddiqui

가 무엇을 볼 것으로 예상 않았다

<section id="header"> <div> <span>HOME</span> <span class="no-spacing">ABOUT US</span> <span>PORTFOLIO</span> <span class="no-spacing">CONTACT US</span> </div> </section>

CSS? 크롬에 예상되는 결과가 나타납니다. – raam86

http://jsfiddle.net/j08691/tfdxt/1/ 다음에 나올까요? – j08691

@ raam86 나는 각 단어 다음에 10px로 구분 된 범위를 볼 것으로 예상합니다. –

사업부 (또는 다른 컨테이너)에 스팬 랩과 같은 컨테이너 위치 :

#header div { 
    position: absolute; 
    width:100%; 
    bottom: 0px; 
}

jsFiddle example

출처

2013-06-18 15:51:10 j08691

감사합니다! 매력처럼 작동합니다! –

CSS - 절대 위치 지정을 할 때 워드 스페이싱이 작동하지 않습니다.

답변

관련 문제