html - 如此接近，但我似乎无法使用三列的固定页脚来工作......

Question

如果这个问题已在其他地方得到解决，我深表歉意，但我一直在寻找，似乎无法弄清楚。

我试图在页面底部设置三个链接，这些链接将被固定，即无论页面或窗口有多大，它们将始终位于底部，位于页面其余部分之上的一层内容。我希望一个链接左对齐，一个居中对齐，一个在页边距内右对齐(我将正文边距设置为 20px)。

经过大量的摆弄和反复试验，我已经非常接近了，但我似乎无法在文本周围获得适当的边距。我想如果我只发送一个指向当前页面的链接可能会更清楚——请忽略彩色背景:)

http://www.chrissvensson.info/ces85/033

我已经尝试了所有我能想到的。如果有人有任何建议，我将非常感激。并随时告诉我我做错了!

这是html:

<div class="bottom-nav">
    <h2 class="previous-link">Previous</h2>
    <h2 class="index-link">Index</h2>
    <h2 class="next-link">Next</h2>
</div>

这是 CSS:

.bottom-nav {
  position:fixed;
  bottom:0px;
  width:100%;
  margin: 0 -20px 0 -20px;
  background-color: red;
} 
.previous-link {
  width: 25%; 
  float: left;
  z-index:1999; 
  background-color: blue;
  margin-left: 0;
}
.index-link { 
  margin: auto;
  z-index:1999; 
  width: 50%;
  text-align: center;
  float: left;
  background-color: yellow;
}
.next-link { 
  width: 25%;
  float: right;
  z-index:1999; 
  text-align: right;
  background-color: green;
  margin-right: 0;
}

提前致谢!

Answer 1

尝试添加
.previous-link a {margin-left:20px} 或
.previous-link a {padding-left:20px}、
和其他链接上的相同。像这样，您不必过多地弄乱 div，而是将链接移动到您想要的位置。
希望对您有所帮助!