Question

如何在CSS中对齐链接列表？

这类似于这个问题：How to Center-Justify text in CSS?，除了使用链接而不是文本。当我使用链接而不是文本时，那里的答案（http://jsfiddle.net/L4pzm/）的小提琴不起作用。

他们是如何在上述小提琴中做到的：

.center-justified {
margin: 0 auto;
text-align: justify;
width: 30em;
}

这是我创建的小提琴：http://jsfiddle.net/hsm4w0p5/

<div class="center-justified"><p>
<a href="1">First </a><a href="2">Second</a><br>
<a href="3">Third <a href="4">Fourth </a><a href="5">Fifth</a></p>
</div>

正如您在上面的示例中所看到的，链接不合理。我想这样做，以便＃34; Second＆＃34;与＃34;第五＆＃34;。

这个词匹配的权利

Answer 1

我不认为这可以使用text-align：justify，但可以使用flexbox做类似的事情：

HTML：

<div class="center-justified">
    <div class="row">
        <a href="1">First </a><a href="2">Second</a>
    </div>
    <div class="row">
        <a href="3">Third <a href="4">Fourth </a><a href="5">Fifth</a>
    </div>
</div>

CSS：

.center-justified {
    margin: 0 auto;
    width: 30em;
}
.row {
    display: flex;
    justify-content: space-between;
}
a {
    text-decoration: none;
}

http://jsfiddle.net/czcegf2d/1/

请务必检查flexbox的浏览器兼容性（这些日子非常好），并确保它符合您的需求。 http://caniuse.com/#feat=flexbox

如何在CSS中居中对齐链接？

1 个答案: