將 Logo 和 Company 捕捉到左側，將導航欄捕捉到右側

Question

我正在為登陸頁面設計 Header 和導航欄。 我的目標是將公司名稱 - <h1>放在徽標 - <img>旁邊。 但是，我需要將導航欄撞到右側。導航欄還需要響應頁面的寬度。 我已經包含了我正在嘗試做的事情的基本圖片。 我的目標是將來能夠用幾乎任何圖像或名稱替換徽標和公司名稱。 整個 header 需要固定在頂部。

這是我的 CSS & HTML

 * { box-sizing: border-box; font-size: 10px; margin: 0px; padding: 0px; } h1 { font-size: 3rem; } #header-img { height: 3rem; } #nav-link { list-style-type: none; } #header { display: flex; justify-content: space-between; align-items: center; } nav > ul { display: flex; justify-content: space-around; } #nav-bar { width: 35vw; }

 <header id="header"> <img id="header-img" src="https://w0.pngwave.com/png/91/429/web-development-html-css3-the-ohana-code-logo-2cpaper-projection-shaded-1660937-html-dropdown-js-png-clip-art.png" alt=""> <h1>Company Name</h1> <nav id="nav-bar"> <ul> <li id="nav-link"><a href="#nav-link1">Nav Link 1</a></li> <li id="nav-link"><a href="#nav-link2">Nav Link 2</a></li> <li id="nav-link"><a href="#nav-link2">Nav Link 3</a></li> </ul> </nav> </header>

Answer 1

將徽標 - <img>和公司名稱 - <h1>嵌套到它自己的div中並使用display: flex; 讓它們水平對齊。

 * { box-sizing: border-box; font-size: 10px; margin: 0px; padding: 0px; } h1 { font-size: 3rem; } #header-img { height: 3rem; } #logo-companyname { display: flex; } #nav-link { list-style-type: none; } #header { display: flex; justify-content: space-between; align-items: center; } nav > ul { display: flex; justify-content: space-around; } #nav-bar { width: 35vw; }

 <header id="header"> <div id="logo-companyname"> <img id="header-img" src="https://w0.pngwave.com/png/91/429/web-development-html-css3-the-ohana-code-logo-2cpaper-projection-shaded-1660937-html-dropdown-js-png-clip-art.png" alt=""> <h1>Company Name</h1> </div> <nav id="nav-bar"> <ul> <li id="nav-link"><a href="#nav-link1">Nav Link 1</a></li> <li id="nav-link"><a href="#nav-link2">Nav Link 2</a></li> <li id="nav-link"><a href="#nav-link2">Nav Link 3</a></li> </ul> </nav> </header>