logo标签列表

HTML/CSS中链接之间的水平间距

htmlcss
7
请查看以下jsfiddle：http://jsfiddle.net/8uFpD/ 我希望“Home”、“What We Do”、“Who We Are”和“Donate”这些链接之间有更多的水平空间。我试过很多方法（如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;
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的答案，因为它让我尝试了这个方法。相比其他答案，我更喜欢这种解决方案，因为它将文本样式与布局样式分开，更加模块化。（另一个答案在最右侧有一个边距，我不想要这个边距。）

1个回答
12
a.navigation-link {
  padding: 0px 10px;
  word-wrap: normal;
  display: inline-block;
}

padding 的完整语法是 top right bottom left，但有缩写版本，您可以在 MDN 上了解更多。我在上面的示例中使用了 top-bottom right-left（因此顶部和底部为 0px，右侧和左侧为 10px）。

这帮助我想出了我的解决方案，我把它放在了我的帖子末尾。 - user3342404
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接