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

那你希望看到什麼？我看到預期的結果在鉻。 – raam86

這是你在http://jsfiddle.net/j08691/tfdxt/1/之後？ – j08691

@ raam86我期望在每個單詞後面看到這些跨度相隔10px。 –

包裹在一個div（或其他容器）的跨度和容器狀的位置：

<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

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

jsFiddle example

來源

2013-06-18 15:51:10 j08691

謝謝！奇蹟般有效！ –

CSS - 字間距在做絕對定位時不起作用

回答

相關問題