html - 将导航栏中的元素与搜索栏对齐

Question

我正在学习 css，我想要一个自定义导航栏，我想在其中做这样的事情:

所以我创建了导航栏项，并在其中分别创建了每个元素。问题是我的社交媒体图标与搜索栏不在同一行。

这是我在做什么的代码示例

*{
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}

#product-overview {
    background-color: #ff1b68;
    width: 100%;
    height: 528px;
    padding: 10px;
}

.section-title{
    color: #2ddf5c;
    }

#product-overview h1{
    color:white;
    font-family: 'Anton', sans-serif;
}

.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding:8px 16px;
}

.main-header > div{
    vertical-align: middle;
}

.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

.main-nav__searchbar{
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}
.main-nav{
    width: 50%;
    text-align: right;
}

.main-nav__items{
display: flex;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
    display: inline-block;
}

.main-nav__social{
    display:block;
    width: 20px;
    height: 20px;
}

<header class="main-header">
            <div>
                <a href="index.html" class="main-header__brand">
                    uHost
                </a></div><nav class="main-nav">
                    <div><input type="text" placeholder="search" class="main-nav__searchbar"></div>
                <ul class="main-nav__items">
                    <li class="main-nav__item"> 
                        <img class="main-nav__social" src="social-media__icons/facebook.svg" alt="facebook">
                    </li>
                    <li class="main-nav__item">
                        <img class="main-nav__social" src="social-media__icons/instagram-bosquejado.svg" alt="facebook">
                    </li>
                </ul>
            </nav>
        </header>

有人能告诉我盒子里的空格有什么问题吗？问候

Answer 1

您需要将 display: flex; 添加到 .main-nav 以生成 .main-nav 的直接子级(这是包含搜索栏的 div 和包含社交媒体图标的 ul)在同一行对齐

试试这段代码:

*{
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}

#product-overview {
    background-color: #ff1b68;
    width: 100%;
    height: 528px;
    padding: 10px;
}

.section-title{
    color: #2ddf5c;
    }

#product-overview h1{
    color:white;
    font-family: 'Anton', sans-serif;
}

.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding: 16px;
}

.main-header > div{
    vertical-align: middle;
}

.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

.main-nav__searchbar_container {
  display: flex;
  width: 100%;
}

.main-nav__searchbar{
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}

.main-nav{
  display: flex;
  width: 100%;
  text-align: right;
  margin: 0 10px;
}

.main-nav__items{
display: flex;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
    display: inline-block;
}

.main-nav__social{
    display:block;
    width: 20px;
    height: 20px;
    margin-left: 10px
}

<header class="main-header">
            <div>
                <a href="index.html" class="main-header__brand">
                    uHost
                </a>
                </div>
                
                <nav class="main-nav">
                    <div class="main-nav__searchbar_container">
                    <input type="text" placeholder="search" class="main-nav__searchbar">
                    </div>
                <ul class="main-nav__items">
                    <li class="main-nav__item"> 
                        <img class="main-nav__social" src="social-media__icons/facebook.svg" alt="facebook">
                    </li>
                    <li class="main-nav__item">
                        <img class="main-nav__social" src="social-media__icons/instagram-bosquejado.svg" alt="facebook">
                    </li>
                </ul>
            </nav>
        </header>