我希望導航欄專案在徽標旁邊左對齊，但我無法實作這一點。
有誰知道發生了什么？
它的樣子：
我想要消失的空間：
我的 HTML 代碼：
<nav id="nav-bar">
<a href=""><img src="https://assets.codepen.io/7471668/logo pic.png" id="header-img" alt="company-logo" /></a>
<ul class="nav__menu">
<li class="nav__item">
<a class="nav-link" href="">Options</a></li>
<li class="nav__item">
<a class="nav-link" href="">How it works</a></li>
<li class="nav__item">
<a class="nav-link" href="">Sign-up</a></li
</ul>
</nav>
我的 CSS：
#nav-bar {
display: flex;
position: fixed;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 1);
}
.nav__menu {
display: flex;
font-size: 0.95rem;
}
.nav__item {
margin-right: 3rem;
font-family: archivo;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover,
.nav-link:focus-visible {
box-shadow: 0 4px 0 -1px #FFF;
}
#header-img {
width: 25%;
margin-top: 6px;
margin-left: 10px;
margin-right: 0;
}
uj5u.com熱心網友回復：
#nav-bar {
display: flex;
position: fixed;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 1);
}
.nav__menu {
display: flex;
font-size: 0.95rem;
}
.nav__item {
margin-right: 3rem;
font-family: archivo;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover,
.nav-link:focus-visible {
box-shadow: 0 4px 0 -1px #FFF;
}
#header-img {
/* from width:25% */
width: 100px; /*Use px*/
margin-top: 6px;
margin-left: 10px;
margin-right: 0;
}<nav id="nav-bar">
<a href=""><img src="https://assets.codepen.io/7471668/logo pic.png" id="header-img" alt="company-logo" /></a>
<ul class="nav__menu">
<li class="nav__item">
<a class="nav-link" href="">Options</a></li>
<li class="nav__item">
<a class="nav-link" href="">How it works</a></li>
<li class="nav__item">
<a class="nav-link" href="">Sign-up</a></li
</ul>
</nav>只需使用“px”來調整影像的寬度。我改width: 25%;到width: 100px;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399991.html
上一篇：一旦元素在容器內的其他元素之間達到一定距離，如何讓flexbox元素包裝起來？
下一篇：HTML/CSS中的固定對齊