水平空間CSS

請參閱以下的jsfiddle： http://jsfiddle.net/8uFpD/水平空間CSS

我想鏈接「家庭」，「我們做什麼」，「我們是誰」和「捐贈」有介於兩者之間更多的橫向空間他們。我不知道該怎麼做，我嘗試了很多方法（跨度，格等）

如何在它們之間添加水平空間而不必訴諸於放置白色正方形圖像？（這似乎是粘在我身上。）

HTML：

<body> 
<div class="wrapper"> 
    <div class="whiteTitleBar"> 
     <span class="title">My Website</span> 
     <span class="navigation"> 
      <a class="navigation" href="index.html"> Home</a> 
      <span class="navigationSpace"/> 
      <a class="navigation" href="ourwork.html"> What We Do</a> 
      <span class="navigationSpace"/> 
      <a class="navigation" href="about.html"> Who We Are</a> 
      <span class="navigationSpace"/> 
      <a class="navigation" href="donate.html"> Donate</a> 
     </span> 
    </div> 

    <div class="blackHorizontalLine"></div> 
    <div class="redYouAreHereBar">HOME</div> 
    <div class="blackHorizontalLine"></div> 
    <div class="home"> 
     BLAH BLAH BLAH 
    </div> 
</div> 

</body>

CSS：爲我工作

body { 
font-family:Arial, Helvetica, sans-serif; 
margin:0px; 
background-image:url('images/bg.jpg'); 
background-repeat:no-repeat; 
background-size: 100% 100%; 
} 

div.wrapper { 
width:862px; 
margin-left:auto; 
margin-right:auto; 
border:2px solid black; 
margin-top:20px; 
margin-bottom:20px; 
} 

div.home { 
background-image:url('images/bg_home.jpg'); 
background-repeat:no-repeat; 
height:492px; 
} 

div.homeText { 
position:relative; 
left:390px; 
top:400px; 
font-size:xx-large; 
color:#ffffff; 
text-shadow: 2px 2px 3px black; 
} 

span.title { 
color:#000000; 
float:left; 
font-size:x-large; 
} 

span.navigation { 
color: #000000; 
float:right; 
} 

span.homeTagline { 
font-size: x-large; 
position:relative; 
left:65px; 
text-shadow: 2px 2px 3px black; 
} 


/* unvisited link */ 
a.navigation:link { 
color:#000000; 
text-decoration:none; 
} 

/* unvisited link */ 
a.navigation:visited { 
color:#000000; 
text-decoration:none; 
} 

/* mouse over link */ 
a.navigation:hover { 
color:#FF0000; 
text-decoration:none; 
} 

/* mouse over link */ 
a.navigation:active { 
color:#FF0000; 
text-decoration:none; 
} 



h1.white { 
color:#ffffff; 
} 

div.whiteTitleBar { 
background-color:#ffffff; 
height:50px; 
padding:10px; 
text-shadow: 1px 1px 5px #909090; 
} 

div.redYouAreHereBar { 
background-color:#ff0000; 
height:50px; 
padding:10px; 
font-size:xx-large; 
color: #ffffff; 
text-shadow: 2px 2px 5px black; 
} 


div.white { 
background-color:#ffffff; 
} 

div.red { 
background-color:#ff0000; 
} 

div.teal { 
background-color: #008080; 
} 

div.lightGray { 
background-color: #D1D0CE; 
} 

div.grayTransparent { 
background-color: #837E7C; 
opacity:0.2; 
filter:alpha(opacity=20); /* For IE8 and earlier */ 
} 

div.darkGray { 
background-color: #404040; 
} 

div.whiteTransparent { 
background-color: #ffffff; 
opacity:0.7; 
filter:alpha(opacity=70); /* For IE8 and earlier */ 
} 

div.blackBorder { 
border:2px solid black; 
} 

div.blackHorizontalLine { 
border-bottom:2px solid black; 
}

解決方案

我已將此添加CSS

span.navigationSpace { 
    padding-left: 50px; 
}

，我也進行了測試，它也工作了（作爲一種替代解決方案）：

span.navigationSpace { 
    margin-left: 50px; 
}

我想我嘗試了所有這些，但也許我只需要刪除我的緩存的變化展現出來，我不知何故錯過了？

我選擇了Roy的回答，因爲它讓我嘗試了這一點。我比其他答案更喜歡此解決方案，因爲它更加模塊化地將文本樣式與佈局樣式分開。（而另一個答案對的最右邊，我首選沒有邊際。）

來源

2014-02-23 user3342404

a.navigation-link { 
    padding: 0px 10px; 
    word-wrap: normal; 
    display: inline-block; 
}

padding的完整的語法是top right bottom left，但也有速記，你可以閱讀更多關於MDN。我在上面的例子中使用了top-bottom right-left（所以0px用於頂部和底部，10px用於右側和左側）。

來源

2014-02-23 04:16:22 royhowie

這幫助我想出了我的解決方案，我在我的文章結尾處提出瞭解決方案。 – user3342404

回答

相關問題