新手求助：如何将搜索栏与黑色按钮右移？CSS代码问题排查

我想要将页面中的搜索栏和黑色按钮向右对齐，以下是预期效果与当前实现效果的对比：

预期效果：

当前效果：

当前使用的CSS代码如下：

.header-button-and-search-bar{
    display:flex;
    flex-direction: row;
}

.header-search-bar input[type=text]{  
    justify-content: flex-end;
    width:170px;
    height: 38px; 
    font-size: 15px;
    font-family: var(--ff-links-cabecalho);
    font-weight: 400;
    text-align: center;
    color: #6C757D;
    
}

.header-black-button{
    justify-content: flex-end;
    font-family: var(--ff-links-cabecalho);
    font-weight: 500;
    font-size: var(--fs-buscar-cabecalho);
    color:var(--cor-secundaria-cabecalho);
    border: 1px solid #FFFFFF;
    padding: 9px 12px;
    letter-spacing: 0.02856rem;
    text-align: center;
}

问题原因 #

justify-content是flex容器专属属性，用来控制容器内子元素的排列方向，你现在把它加在了搜索框、按钮这些flex子元素上，完全起不到对齐作用。

修正方案 #

1. 将justify-content: flex-end加到父容器.header-button-and-search-bar上，让容器内的子元素（搜索栏+按钮）整体右对齐
2. 给父容器添加width: 100%（或flex: 1），确保容器占满父元素的可用宽度，否则没有足够空间实现右对齐
3. 移除搜索框和按钮上无效的justify-content: flex-end属性

修正后的CSS代码：

.header-button-and-search-bar{
    display:flex;
    flex-direction: row;
    justify-content: flex-end; /* 控制子元素右对齐 */
    width: 100%; /* 占满父元素宽度 */
    gap: 8px; /* 可选：给两个元素之间加间距，更贴合预期效果 */
}

.header-search-bar input[type=text]{  
    width:170px;
    height: 38px; 
    font-size: 15px;
    font-family: var(--ff-links-cabecalho);
    font-weight: 400;
    text-align: center;
    color: #6C757D;
    
}

.header-black-button{
    font-family: var(--ff-links-cabecalho);
    font-weight: 500;
    font-size: var(--fs-buscar-cabecalho);
    color:var(--cor-secundaria-cabecalho);
    border: 1px solid #FFFFFF;
    padding: 9px 12px;
    letter-spacing: 0.02856rem;
    text-align: center;
}

如果父容器本身已经有固定宽度或已占满空间，width:100%可以省略。gap属性是可选优化，用来调整元素间距。

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