将 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>