HTML+CSS开发时导航栏与搜索栏各占50%宽度无法同行显示怎么修复

核心问题排查 #

你的代码里存在3个直接导致布局换行的问题：

• CSS语法错误：.logo img 样式结束后多了一个多余的闭合大括号，会导致后续的导航栏样式解析异常，这也是你把代码改回原版本依然失效的核心原因
• 盒模型计算溢出：.rightNav 设置了50%宽度+左右23px内边距，默认content-box盒模型下内边距会额外叠加在宽度上，两个子元素总宽度超过100%触发换行
• 内部元素撑宽容器：.nav-list 内的.logo 设置了50%宽度，加上4个导航项每个60px的左右内边距，很容易撑满甚至超出.nav-list 本身的50%宽度，触发换行

具体修改步骤 #

1. 清理CSS语法错误：删除.logo img 样式结束后多余的那个}
2. 全局统一盒模型，清除默认边距：在CSS最顶部添加通用样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. 调整flex布局宽度规则，替换硬编码的50%宽度：

• 给.nav-list 删掉width: 50%，添加flex: 1，让导航区自动占剩余可用空间
• 给.rightNav 删掉width: 50%，添加align-items: center; gap: 8px;，让搜索框和按钮垂直居中且有合理间距

4. 调整logo宽度避免占用多余空间：给.logo 删掉width: 50%，改成width: auto
5. 调整导航栏对齐规则：给.navbar 把justify-content: center改成justify-content: space-between，让左右区域自然靠两边对齐
6. 如果你需要调大导航链接尺寸，直接给.nav-list li a 添加font-size: 你要的字号即可，不要修改容器的宽度属性

修改后完整代码 #

CSS部分 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.logo{
    width: auto;
    display: flex;
    align-items: center;
    margin-right: 20px;
}

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

.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    cursor: pointer;
    padding: 0 23px;
}
.nav-list {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-right: 0;
    gap: 10px;
}

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

.nav-list li a{
    text-decoration: none;
    color: white;
    /* 要改导航链接大小直接改下面的font-size即可 */
    /* font-size: 18px; */
}

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

.rightNav{
    text-align: right;
    display: flex;
    align-items: center;
    gap: 8px;
}

#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;
}

HTML部分 #

<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>

内容的提问来源于stack exchange，提问作者Aman Jha