0

Soy nuevo en HTML y Tengo varias horas tratando de "juntar" dos botones en donde se redirecciona a las paginas de unas redes sociales, pero quiero que aparezcan los botones uno al lado del otro.

Asi es como me queda

La imagen de arriba muestra como me queda, cosa que no quiero. Quiero que me quede como la de acontinuación

2

De antemano les agradezco

2
  • 1
    Te sugiero que cuando hagas preguntas, en lugar de asignar solo imágenes, también muestres parte del código.
    – CodeFluid
    Commented el 9 may. 2019 a las 5:30
  • Bienvenido a Stack Overflow en español, te sugiero que hagas el recorrido de bienvenida para aprender el funcionamiento del sitio y de paso ganes tu primera medalla, también es muy importante que leas Cómo preguntar para poder mejorar tu pregunta y que esta sea bien recibida por la comunidad y aquí te dejo un ejemplo mínimo verificable
    – ElGerar
    Commented el 9 may. 2019 a las 5:47

3 respuestas 3

2

Me imagino que cada logo ira dentro de una etiqueta , así que puedes darle a cada la propiedad css float: left, con eso consigues que se pongan un elemento al lado del otro, y con margin-left o margin-right les das espacios a los lados para que no te queden juntos.

Como alternativa te recomiendo que uses Flex, te comento como iría:

HTML

<div class="contenedor">
<a href="#">Facebook</a>
<a href="#">Instagram</a>
<a href="#">Twitter</a>
</div>

CSS

.contenedor{
 display: flex;
}


.contenedor a:not(:last-child){
 margin-right: 10px;
}

Aquí básicamente lo que estas haciendo es alinear los iconos uno al lado del otro, dándoles un margen de 10px a la derecha a todos lo elementos de dentro del contenedor excepto al último

1
  • Gracias alberto, me sirvio demasiado. Logre lo que quería, ya es un problema menos xD Commented el 9 may. 2019 a las 16:53
1

Para poder realizar lo que dices, deberías de meter tus imágenes dentro de un div, si ya están dentro, agregale ya sea una clase o un id y asignale el valor display: inline-block; de esta manera tus imágenes deben de quedar como quieres. Ejemplo:

div#acostar {
     display:inline-block;
}

<div id="acostar">
    <img....>
    <img....>
</div>
0

Lo correcto semánticamente hablando, sería:

nav {
  display: flex
}

a {
  background-color: #fff;
  border: 3px solid #ff453a;
  border-radius: 50%;
  height: 5em;
  margin-right: 1em;
  width: 5em
}

a:last-child {
  margin-right: 0
}

.social {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%
}

.social:hover {
  opacity: .75
}

.messenger {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/Facebook_Messenger_logo.svg)
}

.twitter {
  background-image: url(https://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg)
}

.google {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg)
}
<nav>
  <a class="messenger social" href="#"></a>
  <a class="twitter social" href="#"></a>
  <a class="google social" href="#"></a>
</nav>

Lo que pides, semánticamente hablando es una lista de redes sociales, que básicamente es un elemento nav. Utilizarlo mejoraría el ranking del sitio frente a motores de búsqueda como Google o Bing.

Te recomiendo encarecidamente el uso de imágenes SVG en vez de PNG.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.