请参阅以下jsfiddle:http: //jsfiddle.net/8uFpD/
我希望链接"主页""我们做什么""我们是谁"和"捐赠"以在它们之间留出更多的水平空间.我无法弄明白该怎么做,我尝试了很多方法(span,div等)
如何在不必使用白色方形图像的情况下添加它们之间的水平空间？(这对我来说似乎很俗气.)
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; …