如何在 HTML 列表中的单词之间添加空格

Question

如上图所示，我是一个尝试使用 HTML/CSS 进行编码的菜鸟。 如何使用 CSS 在不同大小的单词之间添加一致的空格以添加页码？ 我尝试使用列间距为 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>

但是我们团队的高级开发人员提到要在与产品项目相同的 div 中打印页码，因为在使用 php 进行编程时，使用两个循环分别打印产品和产品项目会很麻烦。

Answer 1

使用正确的 CSS 网格定义进行grid-auto-flow: row dense; 和grid-template-rows: repeat(auto-fill, 1fr); ，并删除内部包装：

 .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>

你甚至可以省略 CSS 类，让它对你的后端同事更友好：

 .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>

Answer 2

你也可以使用flex-box 。

• 给prodDetails一个宽度并使其可扩展。

此外，使用<br>是一种不好的做法。

 .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>

参考：

• 有时使用 <BR /> 是不是很糟糕？

Answer 3

position 块相对于其父级的选项：

 .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>

Answer 4

你也可以使用display: flex; 和justify-content: space-between;

这是工作代码：

 .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>

Answer 5

这是<table>很容易解决的问题。

<table>不建议用于创建布局，但创建它是为了显示表格数据，这似乎是你的情况。

您可以在循环的每次迭代中创建一个<tr></tr>元素及其<td></td>子元素，并将每个元素存储在数组中，或者将它们作为字符串连接到单个字符串中。 取决于什么最适合您的情况。

 .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>