我正在嘗試將影像添加到導航欄，無論我采用哪種方法，我都會遇到無數問題。影像太大時“退出”容器，影像未在中心對齊 - 垂直或水平，影像會根據大小改變導航欄的外觀......
我只想要一個適合在最后或只是在我的導航欄中某個位置的影像，如果我調整頁面大小，它會與其他元素一起移動。（即停留在其他標簽的右側）。
我將此代碼作為制作產品登陸頁面的 freecodecamp 挑戰的一部分，并且我正在嘗試制作一個導航欄，其徽標位于導航欄中。我想要它在右邊，但我已經放棄了，我只想把它放在里面。
我嘗試過 W3School 教程，嘗試使用 Flexbox（此處代碼中的示例）和一堆不同的東西。問題是影像不在“容器中”。我總是可以修改它的大小，它會退出導航欄，修改導航欄的大小......無數的問題。
這是html和CSS：
html {
box-sizing: border-box;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
height: 30px;
width: 100%;
}
li {
display: inline;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: white;
}
img {
display: inline;
width: 20px;
}<header id="header">
<img id="header-img">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#Running">Push Farther. Run Wilder.</a></li>
<li><a class="nav-link" href="#Hiking">Above. Beyond. And Back Again.</a></li>
<li><a class="nav-link" href="#Diving">Groundbreaking, even in the sea.</a></li>
</ul>
<img src="https://cdn.freebiesupply.com/logos/large/2x/apple1-logo-png-transparent.png"></img>
</nav>
</header>這些是發生的問題：
在這張圖片中，我使用高度作為 img，并且高度出現在導航欄的頂部，加上徽標退出導航欄而不是被封頂或其他東西。
沒有大小屬性??，標志會變得很大，所有與導航欄相關的影像都會消失。
然后在沒有 flexbox 的情況下，讓影像位于導航欄中、大小合適并對齊從未發生過。
只是不知道如何解決這個問題，我對 CSS 有什么誤解。我在這件事上花了這么長時間。
非常感謝您的幫助！
編輯：
對于我已顯示的修復，會發生此錯誤： 在此處輸入影像描述
如您所見，導航欄上方有空白區域。我給徽標添加了紅色邊框，因此空白更明顯，也許它可以幫助某人理解問題。
uj5u.com熱心網友回復：
歡迎來到 CSS 的奧秘??
首先，我將 body margin:0 設定為，因為這經常會導致頭痛欲裂。擁有它并將所有內容設定為邊框框可以阻止很多對齊/定位問題。這應該是 CSS 任何部分的前幾行。
然后我讓你的 ul 塊 flex-grow:2，試圖做的是盡可能地擴展，以便將你的蘋果標志推到右邊。
為了阻止它一直掛到最后，我在你的導航中添加了一個填充。
看看你的想法。如果您有任何問題，請發表評論，我會解釋。
編輯添加：這里有一些資源可以讓你從CSS 技巧和Kevin Powell開始
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
margin: 0;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
padding: 0.5rem 1rem;
}
li {
display: inline;
margin-inline: 0.5rem;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
flex-grow: 2;
}
a {
text-decoration: none;
color: white;
}
img {
display: inline-block;
width: 50px;
}<header id="header">
<img id="header-img" src="https://www.fillmurray.com/50/50/">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#Running">Push Farther. Run Wilder.</a></li>
<li><a class="nav-link" href="#Hiking">Above. Beyond. And Back Again.</a></li>
<li><a class="nav-link" href="#Diving">Groundbreaking, even in the sea.</a></li>
</ul>
<div>
<img src="https://cdn.freebiesupply.com/logos/large/2x/apple1-logo-png-transparent.png">
</div>
</nav>
</header>uj5u.com熱心網友回復：
首先，如果您在問題中創建一個代碼片段以便您的代碼是可執行和可修改的，這將很有幫助。
要解決您的問題，您可以將影像的高度設定為百分比值，以便它與父容器的高度一起縮放，并且永遠不會大于容器本身。重要的是，如果您在頁面上使用其他影像，您應該只選擇導航欄的影像。因此，還要更改選擇器以僅影響導航中的影像（您也應該對所有其他選擇器執行此操作）：
nav img {
display: inline;
height: 70%;
}
如果您不希望影像大于某個高度，您還可以設定最大高度：
nav img {
display: inline;
height: 70%;
max-height: 50px;
}
這是一個例子
html {
box-sizing: border-box;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background-color: rgba(0,0,0,0.8);
height: 30px;
width: 100%;
}
nav li {
display: inline;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav a {
text-decoration: none;
color: white;
}
nav img {
display: inline;
height: 70%;
}<header id="header">
<img id="header-img">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#Running">Push Farther. Run Wilder.</a></li>
<li><a class="nav-link" href="#Hiking">Above. Beyond. And Back Again.</a></li>
<li><a class="nav-link" href="#Diving">Groundbreaking, even in the sea.</a></li>
</ul>
<img src="https://cdn.freebiesupply.com/logos/large/2x/apple1-logo-png-transparent.png"></img>
</nav>
</header>希望有幫助
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/523538.html