Question 45794 in CSS Question posted in
Some basic documentation can be found here.

Trying to understand Justify content in CSS in my react code. I tried using the justify content: space between but it is not working

`//My HTML code
<div>
<div className="picbot">PicBot</div>

<ul className="navbarlist">
<li>Overview</li>`your text`
<li>Examples</li>
<li>Tour</li>
<li>Blog</li>
<li>Help</li>
</ul>
            
<button className="download">Download</button>
</div>`

// My CSS code
.navbarlist {
list-style: none;
display: inline-flex;
flex-direction: row;
color: rgb(192, 190, 190);
font-size: 18px;
font-weight: 600;
justify-content: space-between;

}

I applied the justify content: space between on the ul tag with className of .navbarlist expected the items on the list to space out evenly but they don’t (I use className instead of class in the html because it is written in jsx)

Tags:

2

Answers


  1. 0

    They are spaced evenly, there’s just no additional space for them to occupy. So they evenly have no space in between them. Inline elements (including inline-flex) don’t automatically expand to the width of their containers.

    You can make the entire <ul> take up the width of its container by changing inline-flex to flex, for example:

    .navbarlist {
  list-style: none;
  display: flex;  // <-- here
  flex-direction: row;
  color: rgb(192, 190, 190);
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
}
    <div>
  <div class="picbot">PicBot</div>
  <ul class="navbarlist">
    <li>Overview</li>
    <li>Examples</li>
    <li>Tour</li>
   <li>Blog</li>
   <li>Help</li>
  </ul>
  <button class="download">Download</button>
</div>
    Login or Signup to reply.
  2. 0

    You didn’t add width to your div (.navbarlist) and in this way, the div doesn’t expand and add gaps between items as expected. Try to add width and see if that will help.

    .navbarlist {
list-style: none;
display: flex;
flex-direction: row;
color: rgb(192, 190, 190);
font-size: 18px;
font-weight: 600;
justify-content: space-between;
width: 800px

}
    <div>
<div class="picbot">PicBot</div>

<ul class="navbarlist">
<li>Overview</li>`your text`
<li>Examples</li>
<li>Tour</li>
<li>Blog</li>
<li>Help</li>
</ul>
            
<button class="download">Download</button>
</div>

    Also, there is a different solution for this. You can simply change inline-flex to flex. This way you don’t necessarily need to add width.

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

Back To Top
Search