CSS中搜索栏设置width:100%不生效问题求助

你这问题核心是层级嵌套和布局规则没理清楚：

• .search-bar的直接父元素是<form class="search-form">，不是.search-container。你设的width:100%是相对于form的宽度，而form默认是“内容宽”，不是撑满外层容器的宽度，所以搜索栏自然没法占满.search-container。
• 另外.search-container里用了align-content: center，这属性是给flex容器里的多行元素用的，单元素垂直居中应该用align-items: center。

直接调整你的CSS代码即可：

.header-main {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    background-color: rgb(107, 23, 23);
    display: flex;
    justify-content: space-between;
}

.search-container {
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    background-color: rgb(51, 52, 59);
    display: flex;
    /* 替换align-content为align-items，单元素垂直居中用这个 */
    align-items: center;
}

/* 给form添加属性：占满容器宽度，用flex布局管理内部元素 */
.search-container .search-form {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    gap: 8px; /* 可选：搜索栏和按钮之间加间距，提升视觉体验 */
    padding: 0 10px; /* 可选：避免元素贴容器边缘 */
}

.search-container .search-bar {
    box-sizing: border-box;
    border: 1px solid rgb(60, 255, 0);
    height: 40px;
    /* 用flex:1替代width:100%，自动占满form内的剩余空间 */
    flex: 1;
    cursor: text;
    font-size: 14px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(0, 0, 0);
    background-color: rgb(248, 248, 248);
}

.search-btn {
    align-self: center; /* 保持按钮垂直居中 */
}

1. 修正flex对齐属性：align-content用于多行flex元素的对齐，单元素垂直居中用align-items: center才正确。
2. 让form撑满容器：给form设置width:100%，确保它占满.search-container的宽度，为搜索栏提供足够的自适应空间。
3. 用flex:1实现自适应：flex:1会让搜索栏自动填充form内除按钮外的所有剩余空间，不管按钮宽度如何变化，搜索栏都能自适应撑满，比固定百分比更灵活。

修改后，搜索栏会跟随.search-container的宽度（页面的50%）动态调整，完美实现响应式适配。

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