How to add space between words in a list in HTML

Question

image of the list item

I am a noob trying to code using HTML/CSS as shown in the image above. How can I add consistent space between words of different sizes to add the page number using CSS? I tried implementing the same using a grid with column spacing of 90-10%.

.prodFlex {
  display: grid;
  grid-template-columns: 90% 10%;
  column-gap: 10px;
}

<div class="prodFlex">
  <div>
    <span class="prodDetails">1 Cleaning</span><br>
    <span class="prodDetails">2 Diary, Deli and Egg </span><br>
    <span class="prodDetails">3 Health and Beauty</span><br>
    <span class="prodDetails">4 Chicken</span><br>
    <span class="prodDetails">5 Groceries</span><br>
    <span class="prodDetails">6 Paper and Disposables</span><br>
    <span class="prodDetails">7 Bakes and Nuts</span><br>
    <span class="prodDetails">8 Drinks</span><br>
    <span class="prodDetails">9 Sweets and Icecreams</span><br>
    <span class="prodDetails">10 Gifts and toys</span><br>
    <span class="prodDetails">11 Fruits</span><br>
    <span class="prodDetails">12 Fish</span><br>
    <span class="prodDetails">13 Accessories</span><br>
    <span class="prodDetails">14 Meat</span> <br>
    <span class="prodDetails">15 Baby Diapers</span><br>
    <span class="prodDetails">16 Baby Needs</span><br>
    <span class="prodDetails">17 Baby Needs</span><br>
    <span class="prodDetails">18 Tea & Coffee</span><br>
    <span class="prodDetails">19 Rice</span><br>
    <span class="prodDetails">20 Frozen Foods</span><br>
    <span class="prodDetails">21 Milk</span>
  </div>
  <div class="divider">
    <span class="tabSpace">72</span><br>
    <span class="tabSpace">49</span><br>
    <span class="tabSpace">47</span><br>
    <span class="tabSpace">46</span><br>
    <span class="tabSpace">35</span><br>
    <span class="tabSpace">34</span><br>
    <span class="tabSpace">18</span><br>
    <span class="tabSpace">15</span><br>
    <span class="tabSpace">14</span><br>
    <span class="tabSpace">13</span><br>
    <span class="tabSpace">09</span><br>
    <span class="tabSpace">09</span><br>
    <span class="tabSpace">09</span><br>
    <span class="tabSpace">09</span><br>
    <span class="tabSpace">07</span><br>
    <span class="tabSpace">06</span><br>
    <span class="tabSpace">34</span><br>
    <span class="tabSpace">18</span><br>
    <span class="tabSpace">15</span><br>
    <span class="tabSpace">14</span><br>
    <span class="tabSpace">02</span>
  </div>
</div>

But the senior developer in our team had mentioned to print the page number in the same div as that of product items because while programming using php it would be a mess to use two loops to print product and product item as seperate.

"*the senior developer in our team...said... to print the page number in the same div as that of product items...*" - okay? So the HTML you show in your question is the HTML the senior dev wants you to use, or not? If it isn't, then you might as well assume the senior dev will win that discussion, in which case: please show the HTML you have to work with. Incidentally, this looks like it could be a ``, an `
`, or even a `
` rather than just a pile of unrelated non-semantic `` elements. — David Thomas, Sep 13 '22 at 09:26
you could use a good-old `` to display your items, it can be easily managed in PHP (for the sake of your lazy senior developer) — GrafiCode, Sep 13 '22 at 09:26

connexo · Answer 1 · 2022-09-13T10:05:35.550

Use the proper CSS grid definitions for grid-auto-flow: row dense; and grid-template-rows: repeat(auto-fill, 1fr);, and remove the inner wrappers:

.prodFlex {
  display: grid;
  grid-template-columns: 9fr 1fr;
  grid-template-rows: repeat(auto-fill, 1fr);
  grid-auto-flow: row dense;
  column-gap: 10px;
}

.prodDetails {
  grid-column-start: 1;
}

.tabSpace {
  grid-column-start: 2;
}

<div class="prodFlex">
  <span class="prodDetails">1 Cleaning</span>
  <span class="prodDetails">2 Diary, Deli and Egg </span>
  <span class="prodDetails">3 Health and Beauty</span>
  <span class="prodDetails">4 Chicken</span>
  <span class="prodDetails">5 Groceries</span>
  <span class="prodDetails">6 Paper and Disposables</span>
  <span class="prodDetails">7 Bakes and Nuts</span>
  <span class="prodDetails">8 Drinks</span>
  <span class="prodDetails">9 Sweets and Icecreams</span>
  <span class="prodDetails">10 Gifts and toys</span>
  <span class="prodDetails">11 Fruits</span>
  <span class="prodDetails">12 Fish</span>
  <span class="prodDetails">13 Accessories</span>
  <span class="prodDetails">14 Meat</span>
  <span class="prodDetails">15 Baby Diapers</span>
  <span class="prodDetails">16 Baby Needs</span>
  <span class="prodDetails">17 Baby Needs</span>
  <span class="prodDetails">18 Tea & Coffee</span>
  <span class="prodDetails">19 Rice</span>
  <span class="prodDetails">20 Frozen Foods</span>
  <span class="prodDetails">21 Milk</span>

  <span class="tabSpace">72</span>
  <span class="tabSpace">49</span>
  <span class="tabSpace">47</span>
  <span class="tabSpace">46</span>
  <span class="tabSpace">35</span>
  <span class="tabSpace">34</span>
  <span class="tabSpace">18</span>
  <span class="tabSpace">15</span>
  <span class="tabSpace">14</span>
  <span class="tabSpace">13</span>
  <span class="tabSpace">09</span>
  <span class="tabSpace">09</span>
  <span class="tabSpace">09</span>
  <span class="tabSpace">09</span>
  <span class="tabSpace">07</span>
  <span class="tabSpace">06</span>
  <span class="tabSpace">34</span>
  <span class="tabSpace">18</span>
  <span class="tabSpace">15</span>
  <span class="tabSpace">14</span>
  <span class="tabSpace">02</span>
</div>

You can even omit the CSS classes and make it more generation-friendly for your backend colleagues:

.prodFlex {
  display: grid;
  grid-template-columns: 9fr 1fr;
  grid-template-rows: repeat(auto-fill, 1fr);
  grid-auto-flow: row dense;
  column-gap: 10px;
}

.prodFlex span:nth-of-type(odd) {
  grid-column-start: 1;
}

.prodFlex span:nth-of-type(even) {
  grid-column-start: 2;
}

<div class="prodFlex">
  <span>1 Cleaning</span>             <span>72</span>
  <span>2 Diary, Deli and Egg </span> <span>49</span>
  <span>3 Health and Beauty</span>    <span>47</span>
  <span>4 Chicken</span>              <span>46</span>
  <span>5 Groceries</span>            <span>35</span>
  <span>6 Paper and Disposables</span><span>34</span>
  <span>7 Bakes and Nuts</span>       <span>18</span>
  <span>8 Drinks</span>               <span>15</span>
  <span>9 Sweets and Icecreams</span> <span>14</span>
  <span>10 Gifts and toys</span>      <span>13</span>
  <span>11 Fruits</span>              <span>09</span>
  <span>12 Fish</span>                <span>09</span>
  <span>13 Accessories</span>         <span>09</span>
  <span>14 Meat</span>                <span>09</span>
  <span>15 Baby Diapers</span>        <span>07</span>
  <span>16 Baby Needs</span>          <span>06</span>
  <span>17 Baby Needs</span>          <span>34</span>
  <span>18 Tea & Coffee</span>        <span>18</span>
  <span>19 Rice</span>                <span>15</span>
  <span>20 Frozen Foods</span>        <span>14</span>
  <span>21 Milk</span>                <span>02</span>
</div>

grid layout is a powerful tool. I need to spend more time on it. — Rajesh, Sep 13 '22 at 09:36
I am getting started with web dev and am a bit confused with the basics. Thanks for helping out. — MR. UNBOX, Sep 13 '22 at 10:24

score 1 · Answer 2 · answered Sep 13 '22 at 09:32

You can use flex-box as well.

Give prodDetails a width and make it expandable.

Also, use of <br> is a bad practice.

.prodFlex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.prodDetails {
  flex-grow: 1;
  width: 85%;
}

.tabSpace {
  width: 10%;
}

<div class="prodFlex">
    <span class="prodDetails">1 Cleaning</span>
    <span class="tabSpace">72</span>
    
    <span class="prodDetails">2 Diary, Deli and Egg </span>
    <span class="tabSpace">49</span>

    <span class="prodDetails">3 Health and Beauty</span>
    <span class="tabSpace">47</span>

    <span class="prodDetails">4 Chicken</span>
    <span class="tabSpace">46</span>

    <span class="prodDetails">5 Groceries</span>
    <span class="tabSpace">35</span>
</div>

References:

Is it sometimes bad to use <BR />?

1

Appreciate the help mate. – MR. UNBOX Sep 13 '22 at 09:39

score 1 · Answer 3 · answered Sep 13 '22 at 09:41

Also an option to position blocks relatively to their parents:

.prodDetails {
 max-width: 400px;
}
.prodDetails > div > span {
  display: block;
  position: relative;
  float: right;
  top: 0;
  right: 0;
}

<div class="prodDetails">
    <div>1 Cleaning</div>
    <div>2 Diary, Deli and Egg<span>72</span></div>
    <div>3 Health and Beauty<span>73</span></div>
    <div>4 Chicken<span>74</span></div>
    <div>5 Groceries<span>75</span></div>
    <div>6 Paper and Disposables<span>76</span></div>
    <div>7 Bakes and Nuts<span>77</span></div>
    <div>8 Drinks<span>78</span></div>
    <div>9 Sweets and Icecreams<span>79</span></div>
    <div>10 Gifts and toys<span>80</span></div>
    <div>11 Fruits<span>81</span></div>
    <div>12 Fish<span>82</span></div>
    <div>13 Accessories<span>83</span></div>
    <div>14 Meat<span>84</span></div> 
    <div>15 Baby Diapers<span>85</span></div>
    <div>16 Baby Needs<span>86</span></div>
    <div>17 Baby Needs<span>87</span></div>
    <div>18 Tea & Coffee<span>88</span></div>
    <div>19 Rice<span>89</span></div>
    <div>20 Frozen Foods<span>90</span></div>
    <div>21 Milk<span>91</span></div>
</div>

score 1 · Answer 4 · answered Sep 13 '22 at 09:42

You can also use display: flex; and justify-content: space-between;

Here is the working code:

.content_row {
  display: flex;
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prodFlex">
  <div>
    <div class="content_row">
      <span class="prodDetails">1 Cleaning</span>
      <span class="tabSpace">72</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">2 Diary, Deli and Egg </span>
      <span class="tabSpace">49</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">3 Health and Beauty</span>
      <span class="tabSpace">47</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">4 Chicken</span>
      <span class="tabSpace">46</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">5 Groceries</span>
      <span class="tabSpace">35</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">6 Paper and Disposables</span>
      <span class="tabSpace">34</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">7 Bakes and Nuts</span>
      <span class="tabSpace">18</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">8 Drinks</span>
      <span class="tabSpace">15</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">9 Sweets and Icecreams</span>
      <span class="tabSpace">14</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">10 Gifts and toys</span>
      <span class="tabSpace">13</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">11 Fruits</span>
      <span class="tabSpace">09</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">12 Fish</span>
      <span class="tabSpace">09</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">13 Accessories</span>
      <span class="tabSpace">09</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">14 Meat</span>
      <span class="tabSpace">09</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">15 Baby Diapers</span>
      <span class="tabSpace">07</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">16 Baby Needs</span>
      <span class="tabSpace">06</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">17 Baby Needs</span>
      <span class="tabSpace">34</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">18 Tea & Coffee</span>
      <span class="tabSpace">18</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">19 Rice</span>
      <span class="tabSpace">15</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">20 Frozen Foods</span>
      <span class="tabSpace">14</span>
    </div>
    <div class="content_row">
      <span class="prodDetails">21 Milk</span>
      <span class="tabSpace">02</span>
    </div>
  </div>
</div>

That adds alot of unnecessary markup. – connexo Sep 13 '22 at 09:49 — connexo, Sep 13 '22 at 09:49
Sorry, but I didn't get you. @connexo – Sep 13 '22 at 09:54 — , Sep 13 '22 at 09:54

score -1 · Answer 5 · answered Sep 13 '22 at 09:51

That is a problem that <table> solves very easily.

<table> is not recommended for creating layouts, but it was created to display tabular data, which seems to be your case.

You can create a <tr></tr> element with its <td></td> children in every iteration of the loop and either store each in an array, or concatenate them as strings in a single string. Depends on what works best for your case.

.prodflex {
  width: 100%;
}

<table class="prodflex">
  <tr>
    <td class="prodDetails">1 Cleaning</td>
    <td>72</td>
  </tr>
  <tr>
    <td class="prodDetails">2 Diary, Deli and Egg</td>
    <td>49</td>
  </tr>
  <tr>
    <td class="prodDetails">3 Health and Beauty</td>
    <td>47</td>
  </tr>
  <tr>
    <td class="prodDetails">4 Chicken</td>
    <td>46</td>
  </tr>
  <tr>
    <td class="prodDetails">5 Groceries</td>
    <td>35</td>
  </tr>
  <tr>
    <td class="prodDetails">6 Paper and Disposables</td>
    <td>34</td>
  </tr>
  <tr>
    <td class="prodDetails">7 Bakes and Nuts</td>
    <td>18</td>
  </tr>
  <tr>
    <td class="prodDetails">8 Drinks</td>
    <td>18</td>
  </tr>
  <tr>
    <td class="prodDetails">9 Sweets and Icecreams</td>
    <td>15</td>
  </tr>
  <tr>
    <td class="prodDetails">10 Gifts and toys</td>
    <td>14</td>
  </tr>
  <tr>
    <td class="prodDetails">11 Fruits</td>
    <td>13</td>
  </tr>
</table>

@Sfili_81, it can be made responsive. You can see a couple of examples in this article https://css-tricks.com/responsive-data-tables/ — notrev, Sep 14 '22 at 11:19
Yeah but ther are a lots of problem, better use a modern solution — Sfili_81, Sep 14 '22 at 11:33

How to add space between words in a list in HTML

5 Answers5

References: