CSS Separar o menu <li>

[fredkissfree]

Boa tarde, gostaria de saber como faço para separar um <li> em 2 colunas, o problema é o seguinte, tenho um menu em meu header, quando ele vira mobile, fica desalinhado pois os icones tem tamanho diferentes.

Não sei se tem alguma margem ou algo que de para fazer para texto ficar alinhado e icones.

 

Segue print:

 

O TEXTO 2 está desalinhado aos demais, não sei se arruma isso com algo que separa, ou uma margem... caso alguém puder ajudar... segue o código:

<div class="navbar-collapse collapse show" id="navbarToggler" style="">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a href="#" target="_self" class="nav-link"><i class="faz fa-address-card"></i> TEXTO 1</a>
    </li>
    <li class="nav-item">
      <a href="#" target="_self" class="nav-link"><i class="faz fa-file-alt"></i> TEXTO 2</a>
    </li>
    <li class="nav-item">
      <a href="#" target="_self" class="nav-link"><i class="faz fa-envelope"></i> TEXTO 3</a>
    </li>
  </ul>
</div>

Obrigado

[Renan Leite BL]

@fredkissfree Boa tarde mano, 

 

1) Você pode resolver colocando margin-left na li que está desalinhada até ficar perfeito,

    1.1) Adicionando uma classe a essa li e colocando o estilo nela.

<li class="nav-item classeAdicional">
  	<a href="#" target="_self" class="nav-link"><i class="faz fa-file-alt"></i> TEXTO 2</a>
</li>

.classeAdicional{
	margin-left: 10px;
}

   1.2) Pode tambem colocar o style inline.

<li style="margin-left: 10px" class="nav-item classeAdicional">
  	<a href="#" target="_self" class="nav-link"><i class="faz fa-file-alt"></i> TEXTO 2</a>
</li>

  1.3) Pode também usar o pseudo elemento :nth-of-type(n)

 

.nav-item:nth-of-type(2){
 margin-left: 10px; 
}

 

2) Para colocar em 2 colunas, nesse caso, você pode colocar as li como display: inline-block e o último você pode colocar como display: block;

<ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a href="#" target="_self" class="nav-link"><i class="faz fa-address-card"></i> TEXTO 1</a>
    </li>
    <li class="nav-item">
      <a href="#" target="_self" class="nav-link"><i class="faz fa-file-alt"></i> TEXTO 2</a>
    </li>
    <li class="nav-item">
      <a href="#" target="_self" class="nav-link"><i class="faz fa-envelope"></i> TEXTO 3</a>
    </li>
</ul>

ul{
	list-style-type: none;
}

li{
	display: inline-block;
  	margin: 4px;
}

li:nth-of-type(3){
 	display: block; 
}

 

[fredkissfree]

@Renan Leite BL Nossa, tem várias alternativas, muito obrigado

[DiF]

@fredkissfree Eu diria que você pode normalizar a posição deixando todas as "imagens" da mesma dimensão.

 

Claro usando a transparência, podendo deixar no meio do elemento.

Por exemplo:

você tem o container da "imagem"  com tamanho de 30x30.

a imagem em si vai ter 30x30 mas a parte visível da imagem( já que o ícone é menor que o outro) ficará centralizada.

Deixando um espacinho entre as duas margens.  fazendo isso, você pode deixar todos os textos com a mesma margem.

 

Esta é uma das alternativas. Eu prefiro assim, deixando as dimensões das imagens iguais e usar a transparência caso necessário.( lembrando que isso é direto na imagem.)

[fredkissfree]

@DiF  Eu estava lembrando de um mx-auto e my-auto será que resolveria? Se sim acho que eu não estou conseguindo inserir

[makotsunami]

Conforme conversamos, adicione esse CSS no seu site.

 

/** Vai puxar os ícones um poucopra cima pra deixar na altura das palavras */
.nav-link i {
	transform: translateY(-3px);
}

/** Soluções para seu menu mobile */

/** Solução 1 */
@media only screen and (max-width:764px) {
	.nav-link {
		width: 100%;
	}
	.nav-link i {
		width: 20px;
		text-align: right;
	}
}
/** Solução 2 */
@media only screen and (max-width:764px) {
	.nav-link {
		width: 100%;
	}
	.nav-link i {
		width: 20px;
		float: right;
	}
}

 

[fredkissfree]

Deu certo com a solução 1 do @makotsunami .

 

Obrigado a todos.