Tenho uma grelha criada com uma lista ul
cujos elementos internos às li
contém uma borda.
A ideia é que quando os elementos estão lado a lado as bordas sejam manipuladas para que fique apenas um único traço com 1 pixel ao invés do que acontece:
Problema
Como a lista deve ficar com uma largura de 100% da área onde se encontra inserida e os respectivos elementos li
devem ficar com 25% da largura da lista, a borda cinza está aplicada no link a
dentro de cada li
de forma a evitar que os 25% de largura mais os 2 pixeis que a borda (1px borda direita + 1px borda esquerda) ocupa quebrem o layout:
HTML
<ul>
<li>
<a href="#" title="">1</a>
</li>
<li>
<a href="#" title="">2</a>
</li>
<li>
<a href="#" title="">3</a>
</li>
<li>
<a href="#" title="">4</a>
</li>
<li>
<a href="#" title="">5</a>
</li>
<li>
<a href="#" title="">6</a>
</li>
<li>
<a href="#" title="">7</a>
</li>
<li>
<a href="#" title="">8</a>
</li>
</ul>
CSS
ul, li, a{
display:block;
margin:0;
padding:0;
}
ul{
width:100%;
}
li{
float:left;
width:25%;
}
a{
border:1px solid #c9c7c7;
text-align:center;
height:200px;
}
Pergunta
Como fazer para que o resultado final das bordas cinzentas fique com o aspecto em baixo apresentado ?
border-collapse
estaria fora de questão por motivos semânticos?