Problemas para alinhar botões sociais a links em barra horizontal

  • Autor Autor arbitre
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
A

arbitre

Épsilon
Verificación en dos pasos activada
Buenas, a ver si me podéis echar una mano. Estoy creando una barra horizontal con enlaces a la izquierda y botones sociales a la derecha. El problema es que los botones sociales se me bajan a la línea de abajo y no se como subirlos para que se quede en la misma línea que los enlaces. Os copio el código html:

Inserir CODE, HTML ou PHP:
<div id="barra">
	<div id="enlaces">
 <a href="#">Enlace1</a>
 <a href="#">Enlace2</a>
 <a href="#">Enlace3</a>
</div>
 
	<div id="social">
	<div id="fb-root"></div><script facebook"></fb:like>
	</div>
</div>

Os pego ahora el código css:

Inserir CODE, HTML ou PHP:
div#enlaces {
  background: [B]Enlace eliminado[/B]
  padding: 6px;
  padding-left: 200px;
 
  
}
div#enlaces>a {
  color: [B]Enlace eliminado[/B]
  text-decoration: none;
  display: table-cell;
  padding: .4em 12px .4em 12px;
  
}
div#enlaces>a:hover {
  opacity: .7;
  -moz-opacity: .7;
  filter: alpha(opacity=70);
}
div#enlaces>a:last-child {
  border: 0px solid;
  
}

/* SOCIAL
******************/
div#social {
padding-left: 700px;

}

Es la primera vez que programa en css, se agradece la ayuda 😉
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Buenas, a ver si me podéis echar una mano. Estoy creando una barra horizontal con enlaces a la izquierda y botones sociales a la derecha. El problema es que los botones sociales se me bajan a la línea de abajo y no se como subirlos para que se quede en la misma línea que los enlaces. Os copio el código html:

Inserir CODE, HTML ou PHP:
<div id="barra">
	<div id="enlaces">
 <a href="#">Enlace1</a>
 <a href="#">Enlace2</a>
 <a href="#">Enlace3</a>
</div>
 
	<div id="social">
	<div id="fb-root"></div><script facebook"></fb:like>
	</div>
</div>

Os pego ahora el código css:

Inserir CODE, HTML ou PHP:
div#enlaces {
  background: [B]Enlace eliminado[/B]
  padding: 6px;
  padding-left: 200px;
 
  
}
div#enlaces>a {
  color: [B]Enlace eliminado[/B]
  text-decoration: none;
  display: table-cell;
  padding: .4em 12px .4em 12px;
  
}
div#enlaces>a:hover {
  opacity: .7;
  -moz-opacity: .7;
  filter: alpha(opacity=70);
}
div#enlaces>a:last-child {
  border: 0px solid;
  
}

/* SOCIAL
******************/
div#social {
padding-left: 700px;

}

Es la primera vez que programa en css, se agradece la ayuda 😉

Proba con un
Inserir CODE, HTML ou PHP:
float: left;
en div#enlaces

Y un
Inserir CODE, HTML ou PHP:
float: right;
en div#social

y jugá con los padding para que queden mas juntos o alejados 😀
 
Muchas gracias, con los float lo he solucionado! :encouragement:
 
Voltar
Topo