如何在ReactJs中放大导航栏搜索框且不影响Logo尺寸？

AI 小北

2026-6-16

解决React导航栏搜索框放大且不影响Logo尺寸的方案

问题根源

当前布局的核心问题在于：

.navbar_left 未给Logo分配固定空间，flex布局下搜索框的缩放会挤压Logo
搜索框使用 width:200% 和超大 padding-left，导致布局溢出或挤压元素
搜索图标用相对定位脱离文档流，尺寸计算混乱

修正后的代码方案

修改CSS样式（替换原有的相关规则）

.navbar-container{
    display: flex;
    justify-content: space-between;
    background-color: #2c143e;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
    padding: 0 10px;
    box-sizing: border-box;
}

.navbar_left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.logo {
    flex-shrink: 0; /* 强制Logo不缩小，固定尺寸 */
}

img{
    width: 100px;
    height: 100px;
}

.searchbox {
    position: relative;
    width: 100%;
    max-width: 600px; /* 可选：限制搜索框最大宽度，避免过宽 */
}

input{
    border: 3px solid purple;
    height: 40px;
    width: 100%; /* 自适应父容器宽度 */
    padding: 0 45px 0 20px; /* 右侧预留图标空间 */
    border-radius: 50px;
    outline: none;
    font-size: 15px;
    box-sizing: border-box; /* 确保内边距不增加总宽度 */
}

.searchbox i{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中图标 */
    color: #2c143e;
    cursor:pointer;
}

.navbar_right{
    display: flex;
    align-items: center;
    gap: 30px; /* 用gap控制元素间距，替代相对定位 */
}

.cart, .delivery, .login {
    position: static; /* 清除原有相对定位 */
    text-align: center;
}

.cart i, .delivery i {
    font-size: 25px;
}

.delivery i {
    font-size: 20px;
}