HTML / CSS中链接之间的水平空间 [英] Horizontal Space between links in HTML/CSS
问题描述
请参阅以下jsfiddle：
http://jsfiddle.net/8uFpD/ p>
我希望链接首页我们做什么我们是谁和捐赠在它们之间有更多的横向空间。我不知道该怎么做，我尝试了很多方法（span，div等）。
如何在它们之间添加水平空间而不必诉诸放置白色方形图像？ （这对我来说似乎很贴切。）
HTML：
< ;主体>
< div class =wrapper>
< div class =whiteTitleBar>
< span class =title>我的网站< / span>
< span class =navigation>
< a class =navigationhref =index.html>家庭及LT; / A>
< span class =navigationSpace/>
< a class =navigationhref =ourwork.html>我们做什么< / a>
< span class =navigationSpace/>
< a class =navigationhref =about.html>我们是谁< / a>
< span class =navigationSpace/>
< a class =navigationhref =donate.html>捐赠< / 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'）;
背景重复：不重复;
背景大小：100％100％;
}
div.wrapper {
width：862px;
margin-left：auto;
margin-right：auto;
border：2px纯黑色;
margin-top：20px;
margin-bottom：20px;
}
div.home {
background-image：url（'images / bg_home.jpg'）;
背景重复：不重复;
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;
职位：亲属;
left：65px;
text-shadow：2px 2px 3px black;
}
/ *未访问链接* /
a.navigation：链接{
颜色：＃000000;
text-decoration：none;
}
/ *未访问链接* /
a.navigation：visited {
color：＃000000;
text-decoration：none;
}
/ *鼠标悬停在链接上* /
a.navigation：hover {
color：＃FF0000;
text-decoration：none;
}
/ *鼠标悬停在链接上* /
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;
不透明度：0.2;
filter：alpha（opacity = 20）; / *对于IE8及更早版本* /
}
div.darkGray {
background-color：＃404040;
}
div.whiteTransparent {
background-color：#ffffff;
不透明度：0.7;
filter：alpha（opacity = 70）; / *对于IE8及更早版本* /
}
div.blackBorder {
border：2px纯黑色;
}
div.blackHorizontalLine {
border-bottom：2px纯黑色;
}
适用于我的解决方案
我在css中添加了这个
span.navigationSpace {
padding -left：50px;
}
我也测试了这一点，它也起作用（作为替代解决方案） ：
span.navigationSpace {
margin-left：50px;
}
我想我已经试过了，但也许我只需要删除我的缓存因为变化出现了，我不知何故错过了它？
我选择了Roy的回答，因为它让我尝试了这一点。我比其他答案更喜欢此解决方案，因为它更加模块化地将文本样式与布局样式分开。 （另一个答案在最右边有一个保证金，我不想这么做。）
a.navigation-link {
padding：0px 10px;
word-wrap：正常;
display：inline-block;
padding 的s完整的语法是右上角的左下角，但是有一些shorthands，你可以阅读更多关于 MDN 。在上面的例子中，我使用了顶部右下角（所以 0px 用于顶部和底部， 10px 为右侧和左侧）。
See the following jsfiddle: http://jsfiddle.net/8uFpD/
I want the links "Home" "What We Do" "Who We Are" and "Donate" to have more horizontal space in between them. I can't figure out how to do it, I've tried lots of ways (span, div, etc.)
How do I add the horizontal space between them without having to resort to putting a white square image? (That seems tacky to me.)
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;
}
Solution that worked for me
I added this to the css
span.navigationSpace {
padding-left: 50px;
}
and I also tested this, and it also worked (as an alternative solution):
span.navigationSpace {
margin-left: 50px;
}
I thought I tried these already, but maybe I just needed to delete my cache for the changes to show up and I somehow missed it?
I selected Roy's answer because it led me to try this out. I liked this solution better than the other answer because it separates the text style from the layout style, more modularly. (And another answer had a margin on the far right side which I preferred to not have.)
a.navigation-link {
padding: 0px 10px;
word-wrap: normal;
display: inline-block;
}
padding's full syntax is top right bottom left, but there are shorthands, which you can read more about on MDN. I used top-bottom right-left in the example above (so 0px for the top and bottom and 10px for the right and left sides).
这篇关于HTML / CSS中链接之间的水平空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
