Tengo el siguiente menú:
<ul class="topMenu">
<li>
<img src="img/logo.png" alt="">
<p>Winset</p>
<a class="fa fa-twitter" href="https://www.google.es"></a>
<a class="fa fa-instagram" href="https://www.google.es"></a>
</li>
</ul>
Con el siguiente CSS:
/* TOP MENU OF THE PAGE */
.topMenu {
background-color: black;
font-size: 30px;
list-style-type: none;
color: white;
text-align: right;
}
.topMenu a {
color: white;
text-decoration: none;
padding-right: 10px;
}
.topMenu a:hover {
color: yellow;
}
.topMenu img {
width: 50px;
float: left;
}
.topMenu p {
float: left;
}
Tengo un problema a la hora de ajustar todos los elementos al mismo nivel en le menu, ya que se ven de la siguiente forma:
Me gustaría alinear todos los elementos dentro del topMenu
, pero no se como hacer que estén a la misma altura, ¿alguna sugerencia?
Si alguien tiene también alguna sugerencia para mejorar el HTML que he añadido se lo agradecería, ya que estoy empezando y cualquier consejo es bienvenido.
¡Gracias de antemano!