Skip to main content
Remoção de ruídos de comunicação. https://pt.stackoverflow.com/help/behavior
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

Opa, comoComo você está começando agora com o CSS e quer posicionar o conteúdo dos links para a direita, já que foi isso que entendi, a forma mais fácil é o alinhamento de texto mesmo. Neste primeiro caso, seria assim:

#links {
    text-align: right;
}
<div id="links">
  <a href="">Comandos</a>
  <a href="">Docs</a>
  <a href="">Suporte</a>
  <a href="">Convite</a>
</div>

Agora caso você queira uma solução mais elegante que consiga mudar a posição de qualquer elemento da página, você pode usar o flexbox. Neste caso ficaria assim:

nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
<nav>
  <div id="links">
    <a href="">Comandos</a>
    <a href="">Docs</a>
    <a href="">Suporte</a>
    <a href="">Convite</a>
  </div>
</nav>

Também tem como por grid e com classes específicas de bibliotecas css, como por exemplo o bootstrap. Mas acredito que com uma dessas duas soluções você já consegue resolver o problema.

Eu não curto muito usar o "float" porque ele é muito limitado, principalmente pro mobile, e pode causar algum desses problemas que você acabou de citar na pergunta.

PS.: Não se preocupe com os negativos, vamos continuar estudando e melhorando nossos códigos! 🚀

Opa, como você está começando agora com o CSS e quer posicionar o conteúdo dos links para a direita, já que foi isso que entendi, a forma mais fácil é o alinhamento de texto mesmo. Neste primeiro caso, seria assim:

#links {
    text-align: right;
}
<div id="links">
  <a href="">Comandos</a>
  <a href="">Docs</a>
  <a href="">Suporte</a>
  <a href="">Convite</a>
</div>

Agora caso você queira uma solução mais elegante que consiga mudar a posição de qualquer elemento da página, você pode usar o flexbox. Neste caso ficaria assim:

nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
<nav>
  <div id="links">
    <a href="">Comandos</a>
    <a href="">Docs</a>
    <a href="">Suporte</a>
    <a href="">Convite</a>
  </div>
</nav>

Também tem como por grid e com classes específicas de bibliotecas css, como por exemplo o bootstrap. Mas acredito que com uma dessas duas soluções você já consegue resolver o problema.

Eu não curto muito usar o "float" porque ele é muito limitado, principalmente pro mobile, e pode causar algum desses problemas que você acabou de citar na pergunta.

PS.: Não se preocupe com os negativos, vamos continuar estudando e melhorando nossos códigos! 🚀

Como você está começando agora com o CSS e quer posicionar o conteúdo dos links para a direita, já que foi isso que entendi, a forma mais fácil é o alinhamento de texto mesmo. Neste primeiro caso, seria assim:

#links {
    text-align: right;
}
<div id="links">
  <a href="">Comandos</a>
  <a href="">Docs</a>
  <a href="">Suporte</a>
  <a href="">Convite</a>
</div>

Agora caso você queira uma solução mais elegante que consiga mudar a posição de qualquer elemento da página, você pode usar o flexbox. Neste caso ficaria assim:

nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
<nav>
  <div id="links">
    <a href="">Comandos</a>
    <a href="">Docs</a>
    <a href="">Suporte</a>
    <a href="">Convite</a>
  </div>
</nav>

Também tem como por grid e com classes específicas de bibliotecas css, como por exemplo o bootstrap. Mas acredito que com uma dessas duas soluções você já consegue resolver o problema.

Eu não curto muito usar o "float" porque ele é muito limitado, principalmente pro mobile, e pode causar algum desses problemas que você acabou de citar na pergunta.

Fonte Link

Opa, como você está começando agora com o CSS e quer posicionar o conteúdo dos links para a direita, já que foi isso que entendi, a forma mais fácil é o alinhamento de texto mesmo. Neste primeiro caso, seria assim:

#links {
    text-align: right;
}
<div id="links">
  <a href="">Comandos</a>
  <a href="">Docs</a>
  <a href="">Suporte</a>
  <a href="">Convite</a>
</div>

Agora caso você queira uma solução mais elegante que consiga mudar a posição de qualquer elemento da página, você pode usar o flexbox. Neste caso ficaria assim:

nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
<nav>
  <div id="links">
    <a href="">Comandos</a>
    <a href="">Docs</a>
    <a href="">Suporte</a>
    <a href="">Convite</a>
  </div>
</nav>

Também tem como por grid e com classes específicas de bibliotecas css, como por exemplo o bootstrap. Mas acredito que com uma dessas duas soluções você já consegue resolver o problema.

Eu não curto muito usar o "float" porque ele é muito limitado, principalmente pro mobile, e pode causar algum desses problemas que você acabou de citar na pergunta.

PS.: Não se preocupe com os negativos, vamos continuar estudando e melhorando nossos códigos! 🚀