水平空间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

回答

相关问题