más que un problema es una duda que tengo. Estoy profundizando mi conocimiento en desarrollo web front y el este tramite siempre noto que algunas etiquetas nuevas que creo se ubican de forma horizontal a las anteriores o otras si lo hace de forma normal (abajo de la anterior). Ej:
.horizontal li {
float: left;
}
.horizontal a {
margin: 0;
color: #FFFFFF;
background-color: #98BF21;
text-align: center;
padding: 4px;
}
<ul class="myList3 horizontal">
<li><a href="">Inicio</a></li>
<li><a href="">Productos</a></li>
<li><a href="">Servicios</a></li>
</ul>
<input class="boton" type="button" value="+">
Luego agrego un input.button
pero no lo coloca abajo de la lista, sino al lado.
Más que todo es saber porque pasan estás cosas y saber como darle un mejor manejo a eso o que se debe tener en cuenta cada vez vaya a crear etiquetas. Saludos <3
display
de los elementos. Por lo general, los elementos condisplay
de tipoinline
no generan un salto de línea, mientras que los elementos del tipoblock
si, puesto que tienden a ocupar toda la línea horizontal. Por otro lado, al usarfloat
sacas el elemento del flujo natural, haciendo que sea posible colocar otros elementos al lado. Si abres la consola de desarrollo del navegador e inspeccionas el DOM puedes ver qué elementos ocupan qué espacio. Ayuda mucho a entender cómo interaccionan entre ellos.