8

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:

Exemplo no JSFiddle

inserir a descrição da imagem aqui

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 ?

inserir a descrição da imagem aqui

7
  • A quantidade de quadrados é fixa ou dinâmica? Commented 13/01/2014 às 18:07
  • @KennyRafael A grelha é como apresentada, mas no futuro podem ser necessárias mais linhas! As colunas serão sempre quatro.
    – Zuul
    Commented 13/01/2014 às 18:10
  • E esse conteúdo é gerado com PHP? Commented 13/01/2014 às 18:27
  • 1
    Qual é o conteúdo disso? Usar uma tabela com border-collapse estaria fora de questão por motivos semânticos?
    – bfavaretto
    Commented 13/01/2014 às 18:28
  • 1
    @KennyRafael PHP, mas se possível prefiro fugir de uma solução que fique dependente do "gerador" da lista.
    – Zuul
    Commented 13/01/2014 às 19:23

2 Respostas 2

8

Com certas regras de CSS3 é possível afetar apenas algumas das bordas para atingir o resultado desejado:

/* apaga todas as bordas direitas e inferiores */
li a { 
    border-right-color: transparent; 
    border-bottom-color: transparent;
}
/* mostra borda direita a cada 4 itens */
li:nth-child(4n) a { border-right-color: #c9c7c7; }
}
/* mostra borda inferior nos últimos 4 itens */
li:nth-last-child(-n+4) a { border-bottom-color: #c9c7c7; }

http://jsfiddle.net/e73EU/1/

Solução alternativa para resolver a lacuna de 1px

li a { 
    border-right-color: transparent;
    border-bottom-width: 0;
}
li:nth-child(4n) a { border-right-color: #c9c7c7; }
li:nth-last-child(-n+4) a { border-bottom-width: 1px; }

http://jsfiddle.net/e73EU/4/

Suporte

  • Pseudo-classe nth-child: IE9+
  • Pseudo-classe nth-last-child: IE9+
6
  • Só lembrando que caso esteja trabalhando com navegadores incluindo o IE8, seletores como nth-child não funcionam... Commented 13/01/2014 às 18:09
  • Incluí agora links com detalhes sobre suporte.
    – bfavaretto
    Commented 13/01/2014 às 18:12
  • Uma opção é utilizar estes seletores com o Jquery, assim funcionará em qualquer navegador! Commented 13/01/2014 às 18:12
  • Quase lá, mas fica um quadradinho da cor do fundo (branco), devido à ausência de cor na borda.
    – Zuul
    Commented 13/01/2014 às 18:12
  • @Zuul Complicou. Adicionei uma segunda opção que resolve isso, mas você precisa conhecer o número de linhas da grelha (ou escrever CSS para linhas extras), e o conteúdo fica um pouco deslocado para cima.
    – bfavaretto
    Commented 13/01/2014 às 18:26
1

O jeito mais simples de se fazer isso, é utilizando box-sizing e bordas concentradas tanto na UL, quanto nas LIs. Veja:

ul, li { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  width: 100%;
  overflow: hidden;
}

ul li {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  width: 25%;
  float: left;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .