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的直接子级（它们是包含搜索栏和{{1 }}包含在同一行中对齐的社交媒体图标

尝试此代码：

div

ul

将导航栏中的项目与搜索栏对齐

1 个答案: