Ссылки, устанавливающие 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; 
} 

Вызывает ширину каждого связать только зависит от ширины linkWrapper , Таким образом, все ссылки всегда будут иметь одинаковую ширину, и их текст будет обернут, если он превысит эту ширину.