Usar tag li como link?

Front-end
, ,
#1

Bom dia Programadores :grinning:

Gostaria de saber como faço pra que uma tag li se transforme em link. Já tentei com fazer com que a tag “a” ficasse com display:block. Mas não funciona.

Ou então como faço pra que a tag “a” que é filha de “li” tivesse o mesmo tamanho dele (li).

1 - Transformar “li” em link?
2 - Tag “a” com o mesmo tamanho do elemento pai?

Se tiverem curiosidade vou colocar o código aqui em baixo:

   *Header: Socket - Icons*/
   header .shop-virtual ul{
	margin:0;
}

header .shop-virtual li {
    float: left;
    padding-top: 10px;
    margin-left: -1px;
    padding-right: 25px;
    padding-left: 10px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    padding-bottom: 9px;
    overflow: hidden;
}

header .shop-virtual ul li > a{
    border-right: 1px solid #e9e9e9;
    display: block;
}
#2

E se você colocar ‘li’ dentro de ‘a’?

  • Texto

    • #3

    Ao invés de colocar padding no li, coloca no a

    #4

    Só um lembrete (ou pitaco intrometido de um curioso): devemos utilizar as tags do HTML de forma semântica, colocando, por exemplo, links dentro da tag <a>, pensando em basicamente duas coisas:

    1. Acessibilidade. Interpretadores de páginas HTML para pessoas com necessidades especiais se baseiam nas tags para dar um feedback ao usuário;

    2. Search Engine Optimization (ou SEO como o pessoal gosta de chamar).

    Sei bem pouco de front-end web, mas já ouvi isso sendo martelado tantas vezes que aprendi.