如何使用 css/flexbox 修復頂部網頁的導航欄和徽標/標題？

Question

我需要幫助解決如何修復網頁的導航欄和徽標，以及如何使用 flexbox 提供導航欄之間的間距而不是邊距。

請告知每一個建議都將受到歡迎。

 header { display: flex; justify-content: space-between; max-width: 100%; background-color: red; } #logo { margin-left: 2em; } nav {} ul { display: flex; } li { margin-right: 2.5em; list-style-type: none; } a { text-decoration: none; }

 <header> <h1 id="logo"> <a src="#">Portfolio</a> </h1> <nav> <ul> <li><a src="#">Work</a></li> <li><a src="#">Quote</a></li> <li><a src="#">Contact</a></li> </ul> </nav> </header>

Answer 1

你想要這樣的東西嗎？

 header { display: flex; justify-content: space-between; align-items: center; max-width: 100%; height: 12vh; background-color: red; } #logo { margin-left: 2em; height: 100%; width: 7%; } #logo img { width: 100%; height: 100%; } nav { width: 40%; display: flex; justify-content: flex-end; } ul { display: flex; justify-content: space-around; width: 100%; } li { list-style-type: none; } a { text-decoration: none; color: black; } @media screen and (max-width: 700px) { nav { width: 60%; } }

 <header> <div id="logo"><img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg"></div> <nav> <ul> <li><a href="#">work</a></li> <li><a href="#">qoate</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header>