css 我试图将这两个元素移到右边，但我的代码是错误的，我不知道在哪里(我是一个乞丐)

uyto3xhc 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(84)

所以我试图做的是移动搜索栏和黑色按钮的权利，我会告诉你我需要做什么和我现在有什么。
这是我想做的事情

这是我现在的项目，注意最后两个按钮是如何关闭的

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

css

来源：https://stackoverflow.com/questions/76534267/im-trying-to-move-these-two-elements-to-the-right-but-my-code-is-wrong-and-i-do

2条答案

按热度按时间

wnavrhmk1#

首先，您可以删除“justify-content：flex-end;"从您的搜索栏和黑色按钮。在Flex容器中应该使用justify内容来说明元素在其中的位置。
但是，为了做你想做的事情，在你的HTML中添加一个空的DIV在搜索栏和它前面的项目之间。将其命名为“spacer”<div class="spacer"></div>
然后，回到你的CSS，设置DIV以使用“flex-grow”选项扩展：

.spacer { 
    flex-grow: 1; 
}

这个新的div会增长，并将当前的元素推开。
编辑：这假设说“Novidades”和“Promocoes”的元素与搜索栏和黑色按钮在同一个flex容器中。即，“标题按钮和搜索栏”。如果没有，你需要改变你的HTML，使他们。

赞(0）回复(0）举报 2023-06-25

j8yoct9x2#

您正在尝试在flex-items（也称为flex children）上设置justify-content: flex-end;。而是在父元素上设置justify-content，也就是flex parent

.header-button-and-search-bar{
    display:flex;
    flex-direction: row; /* this is default, no need to declare this */
    justify-content: flex-end;

如果您只想搜索栏和右侧的黑色按钮，请将它们 Package 在span中，并在span上设置margin-left: auto;。
或者试试

.header-search-bar input[type=text]{  
margin-left: auto;

}
header-black-button也是如此

赞(0）回复(0）举报 2023-06-25

我来回答

css 我试图将这两个元素移到右边，但我的代码是错误的，我不知道在哪里(我是一个乞丐)

2条答案

相关问题

热门标签

最新问答