Parece que no puedo hacer que los elementos dentro de este div estén en línea. Me gustaría que el h3 esté encima del formulario, luego el siguiente h3 y el formulario al lado.
<div class="title"> <h3><b>Click To Encounter A Pokemon</b></h3> <form method="post" action="/encounter"> <button style="background-color: Transparent;" onclick="catchPokemon()"> <img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100" height="100"> </button> </form> <h3><b>Click To Catch Pokemon</b></h3> <form method="post" action="/encounter"> <button style="background-color: Transparent;" onclick="catchPokemon()"> <img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100" height="100"> </button> </form> </div>Puede agregar un contenedor flexbox que actúe como 'fila' y luego, dentro de eso, los formularios que también son flexboxes, pero 'columnas'.
* { margin: 0; padding: 0; } button { line-height: 0; border: 1px solid black; } .row { display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: flex-start; } .column { display: flex; flex-flow: column nowrap; align-items: center; } <div class="row"> <form class="column" method="post" action="/encounter"> <h3>Click To Encounter A Pokemon</h3> <button onclick="catchPokemon()"> <img type="image" src="https://picsum.photos/100?v=1"> </button> </form> <form class="column" method="post" action="/encounter"> <h3>Click To Catch Pokemon</h3> <button onclick="catchPokemon()"> <img type="image" src="https://picsum.photos/100?v=2"> </button> </form> </div> <div class="title" style="display: flex; justify-content: space-between"> <div> <h3><b>Click To Encounter A Pokemon</b></h3> <form method="post" action="/encounter"> <button style="background-color: Transparent;" onclick="catchPokemon()"> <img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100" height="100"> </button> </form> </div> <div> <h3><b>Click To Catch Pokemon</b></h3> <form method="post" action="/encounter"> <button style="background-color: Transparent;" onclick="catchPokemon()"> <img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100" height="100"> </button> </form> </div> </div>display: flex; al div .title , como se muestra arriba. Uso display: inline; en los nuevos contenedores div también podría funcionar, pero probablemente necesitará ajustar el margen a su gusto.Si desea mostrar esos div en línea, puede usar estilos css. Lo más popular es simplemente escribir float: left; pero prefiero usar flexbox. Es menos complicado.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Pero en este ejemplo puedes usar Float Left/Float right:
ingrese la descripción de la imagen aquí
Tienes que agregar esto a tu código css. Si no desea utilizar estilos de otro archivo, puede agregarlo en la etiqueta <style> .
Por ejemplo:
ingrese la descripción de la imagen aquí
Pones esto en la etiqueta <head> .
Debería verse así. Si quisieras esto:
ingrese la descripción de la imagen aquí
No necesita poner la imagen en forma cuando quiere hacer un hipervínculo. Utilice una etiqueta <a> .
ingrese la descripción del enlace aquí
Buena suerte en la programación :)
