如何在 html 中並排對齊圖像和 label？
[英]how to align image and label side by side in html?
問題描述
我希望我的徽標在左側，導航欄在右側。 我在導航 class 之外嘗試了 img，它確實向左對齊，但我希望導航和我的徽標在一起。 我該怎么做呢？ 謝謝你。
這是我的代碼：
.img { text-align: left; background-position: left; }.nav { border-bottom: 1px solid lightgray; text-align: right; line-height: 70px; height: 70px; }
<div class="nav"> <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;"> <label for="toggle"> ☰ </label> <input type="checkbox" id="toggle"> <div class="menu"> <a href="#">Home</a> <a href="#">Gallery</a> <a href="#">Contact</a> <a href="#">Share</a> <a href="#">Useless</a> </div> </div>
3 個解決方案
解決方案1
4 已采納 2020-07-24 11:10:27
嘗試編寫附加的代碼，它肯定會工作，但如果它沒有在評論中讓我知道，我會盡力幫助你。
在這段代碼中，我創建了一個新的<div>並添加了float:left; 並刪除了一些內聯和內部 CSS。
您的代碼沒有完成工作，因為您已向父 ( .nav ) 元素和子 ( menu ) 元素添加了相反的屬性。
.img { float: left; }.nav { border-bottom: 1px solid lightgray; line-height: 70px; height: 70px; }.menu{ float: right; }
<.DOCTYPE html> <html> <head> <title>Nav</title> </head> <body> <div class="nav"> <div class="img"> <img src="images/logo:png" alt="" height="40px" width="80px" style="margin-left; 5px;"> <label for="toggle"> ☰ </label> <input type="checkbox" id="toggle"> </div> <div class="menu"> <a href="#">Home</a> <a href="#">Gallery</a> <a href="#">Contact</a> <a href="#">Share</a> <a href="#">Useless</a> </div> </div> </body> </html>
解決方案2
1 2020-07-24 11:13:30
只需使用float將內容left對齊或right對齊
.img { float: left; }.nav { border-bottom: 1px solid lightgray; line-height: 70px; height: 70px; }.menu{ float: right; }
<.DOCTYPE html> <html> <head> <title>Nav</title> </head> <body> <div class="nav"> <div class="img"> <img src="images/logo:png" alt="" height="40px" width="80px" style="margin-left; 5px;"> <label for="toggle"> ☰ </label> <input type="checkbox" id="toggle"> </div> <div class="menu"> <a href="#">Home</a> <a href="#">Gallery</a> <a href="#">Contact</a> <a href="#">Share</a> <a href="#">Useless</a> </div> </div> </body> </html>
解決方案3
0 2020-07-24 11:10:39
這是一個很好的解決方案。 我認為復選框（ #toggle ）將默認隱藏。
.img { text-align: left; background-position: left; }.nav { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid lightgray; text-align: right; line-height: 70px; height: 70px; }.nav label { margin-right: auto; } #toggle { display: none; }
<div class="nav"> <img src="images/logo.png" alt="" height="40px" width="80px" style="margin-left: 5px; text-align: left;"> <label for="toggle"> ☰ </label> <input type="checkbox" id="toggle"> <div class="menu"> <a href="#">Home</a> <a href="#">Gallery</a> <a href="#">Contact</a> <a href="#">Share</a> <a href="#">Useless</a> </div> </div>
如何<label>在html中並排</label>對齊<label>和文本</label>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.