Question

我有三个绝对定位的链接。如何将它们彼此相邻显示？它们应始终以页面为中心，因此如果删除一个链接，则其余两个链接将居中。

HTML：

<header>
    <div class="buttons">
        <!-- Looks like this won't work:

        <a href="#" class="email">Email</a>
        <a href="#" class="guestbook">Guestbook</a>
        <a href="#" class="donate">Donate</a>-->

        <!-- Instead we have to wrap them in "cells": -->

        <div>
          <a href="#" class="email">Email</a>
        </div>
        <div>
          <a href="#" class="guestbook">Guestbook</a>
        </div>
        <div>
          <a href="#" class="donate">Donate</a>
        </div>
    </div>
</header>
<p>...</p>

CSS：

header {
    position: fixed;
    width: 100%;
    top: 0;
}
header .buttons {
    width: 100%;
    text-align: center;
    top: 20px;
}
header .buttons, header .buttons > div {
    display: flex;
}
header .buttons a, header .buttons a:after {
    position: absolute;
}
header .buttons a {
    text-indent: -999px;
    height: 50px;
    width: 50px;
    background: white;
    border: 1px solid black;
}
header .buttons a:after {
    position: absolute;
    content:"";
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
}
header .buttons .email:after {
    background: url(http://www.animatedgif.net/email/anim0005-1_e0.gif) no-repeat;
}
header .buttons .guestbook:after {
    background: url(http://www.animatedgif.net/lipsmouth/kissing_e0.gif) no-repeat;
}
header .buttons .donate:after {
    background: url(http://www.animatedgif.net/money/10rotate_e0.gif) no-repeat;
}

Answer 1

首先，您忘记了按钮的位置，这就是您的伪元素相互重叠的原因。所以添加：

header .buttons a{
  position: relative;
}

要使它们居中，请在弹性容器上使用justify-content：

header .buttons{
  justify-content: center;
}

http://jsfiddle.net/DnvXt/

第二，这里需要灵活的盒子吗？因为你的按钮尺寸固定，它们似乎不需要弯曲，是吗？尝试调整窗口大小，使其缩小，您将看到它们会缩小。为了防止你可以flex: none;，但是那么使用flex是什么意思？：）

（没有flex：http://jsfiddle.net/bXdGF）

获得绝对定位的链接以与flexbox一致显示

1 个答案: