0

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

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

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

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;
}

提前致谢!

4

2 回答 2

0

尝试使用弹性盒模型。caniuse.com表示 72.93% 的网络用户至少部分支持它,这是一个相当大的人口。查看它指向 flexbox 游乐场的链接。

如果您的客户可能拥有最新的浏览器,这是一个不错的选择。对于那些没有最新浏览器的潜在客户,您可以将他们转发/链接到此处和/或 browsehappy.com。或者您可以利用 browser-update.org 的通知或 updateyourbrowser.net 的代码。

升级需要迟早发生,越早越好。

于 2013-05-05T01:45:41.897 回答
0

尝试添加
.previous-link a {margin-left:20px}or
.previous-link a {padding-left:20px}
并且在其他链接上相同。像这样,您不会过多地弄乱 div,而是将链接移动到您想要的位置。
希望能帮助到你!

于 2013-05-05T06:02:25.880 回答