0

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.

introducir la descripción de la imagen aquí

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

3
  • 1
    Si quieres saber por qué pasa eso, repasa el display de los elementos. Por lo general, los elementos con display de tipo inline no generan un salto de línea, mientras que los elementos del tipo block si, puesto que tienden a ocupar toda la línea horizontal. Por otro lado, al usar float 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.
    – Benito-B
    Commented el 13 ene. 2022 a las 21:57
  • Hmmm bueno pero el boton puedo moverlo a mi antojo o es necesario que lo meta dentro de un contededor? Porque estuve viendo con el inspector de elementos y con ninguna de las propiedades de display logré hacerlo. :(
    – iSony
    Commented el 13 ene. 2022 a las 22:36
  • ya intentaste ponerle una etiqueta br antes del input? Commented el 14 ene. 2022 a las 4:40

1 respuesta 1

1

Lo que sucede es que la propiedad float cambia el posicionamiento de los elementos, y aunque UL es un elemento de bloque, al contener solo elementos "flotados", entonces se modifica su contexto de formato de bloque y como el navegador lo mostraria, asignandole una altura de 0 por no tener "contenido fijo" dentro del bloque como resultado de aplicar float a los elementos hijos.

Un elemento que agregues después, sea un bloque o un elemento de linea se colocara de esa manera a la derecha del resto, porque aunque no puede empujar mas los elementos flotados, ocupa el espacio dejado por el elemento que contiene los flotados.

Para forzar que se utilice el espacio completo modificarias el contexto del formato del elemento bloque padre. La propiedad sugerida seria "overflow", para que el navegador entonces trate al UL padre en un contexto diferente y ahora sera el elemento contenedor de los flotados.

Luego te puede quedar el CSS:


.horizontal {
  overflow: auto; /* o cualquier otro que su estado inicial visible */
}

Luego para no quebrarte la cabeza con tanto, es mas facil de leer en un codigo de CSS cuando declaras a los elementos hijos LI del UL, como elementos de bloque de linea.

Mire el ejemplo: https://jsfiddle.net/2ba5vd17/

3
  • Ok ok, ya revisé el ejemplo e hice los cambios, pero ahora tengo otro problema, me aparece una especie de barra de desplazamiento al lado de .horizontal, disculpa si parecen muy basicas o tontas mis preguntas pero hay muchas cosas que aun no entiendo de html y css.
    – iSony
    Commented el 14 ene. 2022 a las 13:48
  • 1
    Bueno ya pude resolver el tema de la barra con overflow: hidden; <3... de todas formas gracias por tu aporte.
    – iSony
    Commented el 14 ene. 2022 a las 14:00
  • No es tan sencillo de entender, suerte con el aprendizaje
    – AugustoM
    Commented el 14 ene. 2022 a las 14:59

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.