CODEWITHSUNDEEP
htmlcss
BinkyNichols
BinkyNichols

Reputation: 586

CSS children not spacing evenly in parent

how do I evenly space out elements horizontally (and vertically in a seperate instance), I've tried using display:inline-block;

But it comes out like this:

enter image description here

.scroll_tabs{
    border-right:1px solid black;
    padding-right:5px;
    display: inline-block;
}
...
<div style='margin: 0 auto;border:1px solid black;font-size:1vw;'>  
      <div id="tabs2">
        <span class="scroll_tabs">Apps</span>
        <span class="scroll_tabs">Soups/Salads</span>
        <span class="scroll_tabs">Pizza</span>
        <span class="scroll_tabs">Sandwiches</span>
        <span class="scroll_tabs">Entrees</span>
        <span class="scroll_tabs">Desserts</span>
      </div>
</div>

Any help appreciated.

Upvotes: 2

Views: 53

Answers (2)

Par Tha
Par Tha

Reputation: 1531

Try to update your CSS with the below code

#tabs2{
  display: flex;               /* Newly added */
}
.scroll_tabs {
    border-right: 1px solid black;
    padding-right: 5px;
    display: inline-block;
    flex-grow: 1;            /* Newly added */
    flex-basis: 0;          /* Newly added */
    text-align: center;    /* Newly added */
    padding: 15px 0;      /* Newly added */
}

OUTPUT

enter image description here

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114991

Flexbox can do that:

.scroll_tabs {
  border-right: 1px solid black;
  padding-right: 5px;
  background: lightblue;
}

#tabs2 {
  display: flex;
  justify-content: space-evenly;

}
<div style='margin: 0 auto;border:1px solid black;font-size:1vw;'>
  <div id="tabs2">
    <span class="scroll_tabs">Apps</span>
    <span class="scroll_tabs">Soups/Salads</span>
    <span class="scroll_tabs">Pizza</span>
    <span class="scroll_tabs">Sandwiches</span>
    <span class="scroll_tabs">Entrees</span>
    <span class="scroll_tabs">Desserts</span>
  </div>
</div>

Upvotes: 0

Related Questions