链接适合100％的空间

Question

好吧我正在创建一个链接栏，我想要有五个链接。

<a href="link1">Link1</a>
<a href="link2">Link2</a>
<a href="link3">Link3</a>
<a href="link4">Link4</a>
<a href="link5">Link5</a>

我也不希望链接具有相同的宽度，因此如果一个占用100px，我希望它们都是100px。我希望他们也占据100％的空间。

a{
     /* What would be the code */
}

Answer 1

如果有五个链接

a{
    width:20%;
    display:inline-block;
}

Answer 2

这应该有帮助

Visual demonstration :)

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
a {
    width: 20%;
    float: left;
    border: 1px solid green;
}

Answer 3

您可以使用display: table;为任意数量的链接创建通用解决方案（如果您不关心IE6-7）：

HTML：

<div class="linkWrapper">
    <a href="link1">Link1</a>
    <a href="link2">Link2</a>
    <a href="link3">Link3</a>
    <a href="link4">Link4</a>
    <a href="link5">Link5</a>
</div>

CSS：

.linkWrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.linkWrapper a {
    display: table-cell;
}

table-layout: fixed;导致每个链接的宽度仅取决于linkWrapper的宽度。这样，所有链接将始终具有相同的宽度，如果超过此宽度，则文本将换行。