如何在标题中放置徽标、名称、按钮和导航

【问题标题】：How to place the logo, name, button and nav in header如何在标题中放置徽标、名称、按钮和导航
【发布时间】：2022-06-15 21:22:07
【问题描述】：

我想做这个标题，但我卡住了

我尝试以不同的方式放置它，但没有任何效果。如何将文本放置在徽标附近并从按钮边缘缩进？

https://codepen.io/Pero-Kairu/pen/mdXvaBV

    <header class="header">
        <div class="wrap_logo">
        <img class="logo" src="icons/logo.svg" alt="Logo">
        <p class="name">Travel Portal</p>
  </div>
    
        <nav>
            <ul class="nav_links">
                <li><a href="#">How It Works</a></li>
                <li><a href="#">Plan Your Trip</a></li>
                <li><a href="#">Destinations</a></li>
                <li><a href="#">Travel Stories</a></li>
            </ul>
        </nav>
   
    
        <form class="login_button">
            <input type="button" value="Login">
        </form>
    </header>

    li, a, button {
    text-decoration: none;
    color: white; 
}

li{
    list-style-type: none;
    
}

header {
    display: flex;
    position: fixed; 
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    height: 90px;
    background-color: rgba(242, 120, 92, 0.7);
    color: white;
}

.nav_links li {
    display: inline-block; 
    margin: 0 42px; 
}

【问题讨论】：

• 你到底想达到什么目的？ “将文字放在徽标附近”是什么意思？在旁边，在顶部，在底部......？ “从按钮边缘缩进”是什么意思？你能提供一张你的目标是什么的图片吗？

标签： html css frontend