How do I put Dropdown and image on the same line-CodePudding

I'm trying to make a website for a fake company and im struggling with putting an image and a dropdown on the same line

This is what I tried :

<body> 
      <img src="Kharabora Coding-1 (1).png" height="150px" >  
        <form style="background-color: #ffffff">  
        <div  style="padding-left: 1300px;">
            <button ><a href="#" >LATEST WORK</a></button>
            <div >
            </div>
          </div>
          <div  style="padding-left: 75px;">
            <button ><a href="#" >WHAT WE DO</a></button>
            <div >
            </div>
          </div>
          <div  style="padding-left: 75px;">
            <button ><a href="#" >ABOUT</a></button>
            <div >
            </div>
          </div>
          </form>
        </div>
      </div>
         </body>

and it ended up looking like this :

Please help

CodePudding user response：

div tags are by default displayed as a block. you have to either modify their display as inline, or use a tag that has display as inline by default.

learn more about it here: https://www.w3schools.com/html/html_blocks.asp

CodePudding user response：

just use flex

div{display:flex;
align-items:center;
justify-content:center;
}
*{
border:solid 1px black;
margin:5px;}

html{border:none;}

<div>
<img src='https://via.placeholder.com/50'>
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<img src='https://via.placeholder.com/50'>
</div>

CodePudding user response：

To make things appear on the same line, you can use display: flex or display: grid.

learn more about grid

learn more about flex

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.links {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

<div >
    <img src="https://via.placeholder.com/150x75" >
    <div >
        <a href="#">LATEST WORK</a>
        <a href="#">WHAT WE DO</a>
        <a href="#">ABOUT</a>
    </div>
</div>