Question 191889 in Html Question posted in
Some basic documentation can be found here.

Html – I'm trying to move these two elements to the right but my code is wrong and i don't know where (i'm a begginer)

so what i’m trying to do is move the search bar and the black button to the right, i’m going to show you what I need to do and what I have right now..

this is what i want to do
enter image description here

and this is my project for now, notice how the two last buttons are close
enter image description here

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

2

Answers


  1. 0

    You are trying to set the justify-content: flex-end; on the flex-items aka the flex children. Instead set the justify-content on the parent element aka flex parent

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

    If you want only the search bar and the black button to the right than wrap them in a span and set margin-left: auto;on the span

    Or try

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

    }

    and same for header-black-button

    Login or Signup to reply.
  2. 0

    First off, you can remove the "justify-content: flex-end;" from your search bar and black button. Justify content should be used in the flex container to say how the elements are positioned within it.

    But, in order to do what you want, add to your HTML an empty DIV between the search bar and the items before it. Call it something like "spacer" <div class="spacer"></div>

    Then, going back to your CSS, set that DIV to expand with the "flex-grow" option:

    .spacer { 
    flex-grow: 1; 
}

    That new div will grow and push your current elements apart.

    Edit: this assumes that the elements saying "Novidades" and "Promocoes" are within the same flex container as your search bar and black button. Namely, "header-button-and-search-bar". If not, you’ll need to alter your HTML so that they are.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search