How can I make these divs inline?-CodePudding

I cant seem to make the elements inside this div inline. Id like the h3 to be above the form then the next h3 and form beside that.

<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>

  <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>

CodePudding user response：

You could add a container flexbox that acts as 'row' then within that the forms which are themselves also flexboxes, but 'columns'.

* {
    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 >

    <form  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  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>

CodePudding user response：

<div  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>

Here is a solution if you really don't want to add external styling (a css file linked to your html file). You can add div containers around the content you want aligned, and then, use display: flex; to the .title div, as shown above. Using display: inline; on the new div containers could also work, but you probably will need to adjust the margin to your liking.

CodePudding user response：

If you wanna display those div's in line you can use css styles. Most Popular is just typeing float: left; But i preffer to use flexbox. Its less complicated. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

But in this example you can use Float Left/Float right. enter image description here You have to add this to your css code. If you dont wanna use styles from another file you can add it in tag. For example: enter image description here You put this in tag. It should look like that. If you wanted this. enter image description here

You dont need to put image in form when you wanna make a hyperlink. Use tag. enter link description here

Good Luck in Proggraming :)