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 - 字间距在做绝对定位时不起作用

回答

相关问题