我正在嘗試為一家假公司建立一個網站，但我正在努力將影像和下拉選單放在同一行
這是我嘗試過的：
<body>
<img src="Kharabora Coding-1 (1).png" height="150px" class="img">
<form style="background-color: #ffffff">
<div class="dropdown" style="padding-left: 1300px;">
<button class="dropbtn"><a href="#" class="a-a">LATEST WORK</a></button>
<div class="dropdown-content">
</div>
</div>
<div class="dropdown3" style="padding-left: 75px;">
<button class="dropbtn3"><a href="#" class="a-2">WHAT WE DO</a></button>
<div class="dropdown-content3">
</div>
</div>
<div class="dropdown2" style="padding-left: 75px;">
<button class="dropbtn2"><a href="#" class="a-1">ABOUT</a></button>
<div class="dropdown-content2">
</div>
</div>
</form>
</div>
</div>
</body>
它最終看起來像這樣：
請幫忙
uj5u.com熱心網友回復：
div 標簽默認顯示為一個塊。您必須將它們的顯示修改為行內，或者使用默認顯示為行內的標簽。
在這里了解更多資訊：https ://www.w3schools.com/html/html_blocks.asp
uj5u.com熱心網友回復：
只需使用彈性
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>uj5u.com熱心網友回復：
要使事物出現在同一行，您可以使用display: flex或display: grid。
了解有關網格的更多資訊
了解有關彈性的更多資訊
.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 class="row">
<img src="https://via.placeholder.com/150x75" class="img">
<div class="links">
<a href="#">LATEST WORK</a>
<a href="#">WHAT WE DO</a>
<a href="#">ABOUT</a>
</div>
</div> 轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/531659.html
標籤：htmlcss