为什么我的导航栏和搜索栏不在同一行，即使它们都保持了 50%

Question

我正在尝试制作一个网站。我之前用搜索栏对导航栏进行了编码，它们在同一行，但后来我试图增加导航链接的大小，却错误地增加了整个导航栏的宽度，因此我的搜索栏下降了吃下。然后我将代码改回原来的样子，但我的搜索栏仍然没有上升。如何重新对齐它们？

我正在使用 html+css，这是我的第一个网站。

这是我的代码。如何解决这个问题？

.logo{
    width:50%;
    display: flex;
    align-items: center;

}

.logo img{
    width: 40px;
    min-height: 40px;
    border: 3px solid white;
    border-radius: 150px;
}

}
.navbar{
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    cursor: pointer;
}
.nav-list {
    width: 50%;
    /*background-color: black;*/
    display: flex;
    justify-content: left;
    align-items: center;
    margin-right: 0;
}

.nav-list li{
    list-style: none;
    padding: 26px 30px;
}

.nav-list li a{
    text-decoration: none;
    color: white;
}

.nav-list li a:hover{
    color: gray;
}

.rightNav{
    width: 50%;
    /*background-color: black;*/
    text-align: right;
    padding: 0 23px;
    display: flex;
}

#search{
    padding: 5px;
    font-size: 17px;
    border: 2px solid gray;
    border-radius: 9px;
}

.background{
    background: rgba(0, 0, 0, 0.7) url(../img/bg.jpg);
    background-size: cover;
    background-blend-mode: darken;
}

<nav class="navbar background">
        <ul class="nav-list">
            <div class="logo">
                <img src="img/img.jpg" alt="logo">
            </div>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Blogs</a></li>
            <li><a href="#connect">Connect</a></li>
        </ul>
        <div class="rightNav"> 
            <input type="text" name="search" id="search">
            <button class="btn btn-sm">Search</button>
        </div>
    </nav>

Answer 1

这是因为您在 ul 中包装了导航链接，默认情况下 ul 有一些 margin-bottom。您只需删除 margin-bottom 即可将 ul 和 .rightNav

居中对齐

ul{
    margin-bottom: 0;
}

.logo {
  width: 50%;
  display: flex;
  align-items: center;
}

.logo img {
  width: 40px;
  min-height: 40px;
  border: 3px solid white;
  border-radius: 150px;
}


}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  cursor: pointer;
}
.nav-list {
  width: 50%;
  /*background-color: black;*/
  
  display: flex;
  justify-content: left;
  align-items: center;
  margin-right: 0;
}
.nav-list li {
  list-style: none;
  padding: 26px 30px;
}
.nav-list li a {
  text-decoration: none;
  color: white;
}
.nav-list li a:hover {
  color: gray;
}
.rightNav {
  width: 50%;
  /*background-color: black;*/
  
  text-align: right;
  padding: 0 23px;
  display: flex;
}
#search {
  padding: 5px;
  font-size: 17px;
  border: 2px solid gray;
  border-radius: 9px;
}
.background {
  background: rgba(0, 0, 0, 0.7) url(../img/bg.jpg);
  background-size: cover;
  background-blend-mode: darken;
}
ul {
  margin-bottom: 0;
}

<nav class="navbar background">
  <ul class="nav-list">
    <div class="logo">
      <img src="img/img.jpg" alt="logo">
    </div>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Blogs</a></li>
    <li><a href="#connect">Connect</a></li>
  </ul>
  <div class="rightNav">
    <input type="text" name="search" id="search">
    <button class="btn btn-sm">Search</button>
  </div>
</nav>

为什么我的导航栏和搜索栏不在同一行，即使它们都保持了 50%

why are my nav bar and search bar not in the same line even after keeping both 50%

html

css

header

flexbox

html-heading