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

Html – why ul-list items not getting space between them?

I am trying to create a line in which the list item should have space in a row but I’m not getting why it is not applying when using display: flex; and justify-content: space-between is applied in ul-list class

.container {
  border: 2px solid red;
  background-color: antiquewhite;
  height: 650px;
  display: flex;
  justify-content: space-around;
}

.ul-list {
  display: flex;
  list-style-type: none;
  border: 2px solid green;
  margin-top: 0;
  margin-left: 40px;
  margin-right: 50px;
  justify-content: space-between;
}

.list-item {
  border: 2px solid red;
}
<div class="container">
  <div class="n1">
    <div>Left</div>
  </div>
  <div class="list1">
    <ul class="ul-list">
      <li class="list-item">ONE </li>
      <li class="list-item">TWO</li>
      <li class="list-item">THREE</li>
      <li class="list-item">FOUR</li>
      <li class="list-item">FIVE</li>
    </ul>
  </div>
  <div class="n1">
    <div>RIGHT</div>
  </div>
</div>

I know this can be done by applying a margin, but why it’s not getting why not with space-around?

Tags:

2

Answers


  1. 0

    .ul-list { gap: 10px; }
    Use gap property to add spaces between flex items.

    Login or Signup to reply.
  2. 0

    justify-content: space-between will put space between your flex items only if the flex container is larger than the items.

    In your case, you could set a width for .ul-list which is wider than the contents, or you can set a gap as suggested by @ImranMalik.

    .container {
  border: 2px solid red;
  background-color: antiquewhite;
  height: 50px;
  display: flex;
  justify-content: space-around;
  margin-bottom: 1em;
}
.ul-list {
  display: flex;
  list-style-type: none;
  border: 2px solid green;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.list-item {
  border: 2px solid red;
}
    <div class="container">
    <div class="n1">
        <div>Left</div>
    </div>
    <div class="list1">
        <ul class="ul-list">
            <li class="list-item">ONE </li>
            <li class="list-item">TWO</li>
            <li class="list-item">THREE</li>
            <li class="list-item">FOUR</li>
            <li class="list-item">FIVE</li>
        </ul>
    </div>
    <div class="n1">
      <div>Right</div>
    </div>
</div>

<div class="container">
    <div class="n1">
        <div>Left</div>
    </div>
    <div class="list1">
        <ul class="ul-list" style="width: 285px;">
            <li class="list-item">ONE </li>
            <li class="list-item">TWO</li>
            <li class="list-item">THREE</li>
            <li class="list-item">FOUR</li>
            <li class="list-item">FIVE</li>
        </ul>
    </div>
    <div class="n1">
      <div>Right</div>
    </div>
</div>

<div class="container">
    <div class="n1">
        <div>Left</div>
    </div>
    <div class="list1">
        <ul class="ul-list" style="gap: 1em;">
            <li class="list-item">ONE </li>
            <li class="list-item">TWO</li>
            <li class="list-item">THREE</li>
            <li class="list-item">FOUR</li>
            <li class="list-item">FIVE</li>
        </ul>
    </div>
    <div class="n1">
      <div>Right</div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search