如何在HTML串列中的單詞之間添加空格-有解無憂

如何在 HTML 串列中的單詞之間添加空格

如上圖所示，我是一個嘗試使用 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 編程時，使用兩個回圈分別列印產品和產品專案會很麻煩。

uj5u.com熱心網友回復：

grid-auto-flow: row dense;為and使用正確的 CSS 網格定義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>

uj5u.com熱心網友回復：

你也可以使用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 /> 是不是很糟糕？

uj5u.com熱心網友回復：

還有一個選項可以相對于他們的父母定位塊：

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

uj5u.com熱心網友回復：

您還可以使用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>

uj5u.com熱心網友回復：

這是一個<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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/506636.html

標籤：javascript html css

上一篇：如何在反應中創建一個舊的學校表？

下一篇：為什么這個CSS網格不能創建正確數量的行和列？