如此接近，但我似乎无法获得一个固定的三列页脚来工作…

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有太多的麻烦，而是把链接移到你想要的地方。

希望它能帮上忙！

Answer 2

尝试使用flex-box模型。caniuse.com表示，72.93%的网络用户至少部分支持它，这是一个相当大的群体。查看其到flexbox游乐场的链接。

如果你的客户可能有最新的浏览器，这是一个很好的选择。对于那些没有最新浏览器的潜在客户，您可以将它们转发/链接到here和/或browsehappy.com。或者你可以利用browser-update.org的通知或者更新你的浏览器.net的代码。

升级迟早要发生，越快越好。