HTML CSS Text Align justify 无法正常工作答案

【问题标题】：HTML CSS Text Align justify isn't working correctlyHTML CSS Text Align justify 无法正常工作
【发布时间】：2020-11-04 05:02:18
【问题描述】：

        <table >
            <tbody>
                <tr>
                    <th colspan="1">FrisBar:</th>
                    <th > <p style="color:#111;">00</p> </th>
                </tr>
                <tr>
                    <td><p>Totaal:</p></td>
                    <td><p id="FrisBarTot1">0</p></td>
                </tr>
                <tr>
                    <td><p>Kratjes:</p></td>
                    <td><p id="FrisBarKrat1">0</p></td>
                </tr>
                <tr>
                    <td><p>Overige:</p></td>
                    <td><p id="FrisBarOver1">0</p></td>
                </tr>
            </tbody>
        </table>

前两个“totaal”和“Kratjes”工作正常，但“overige”与我想要的不一致。有谁知道如何解决这个问题？

编辑：

通过使用表格，它可以工作并使两个 00 中的数字具有相等的大小/空间。我要感谢所有帮助过我的人：D

【问题讨论】：

我在您的问题中将您的代码放在了 sn-p 中，但请注意您在 CSS 中省略了结束 }
非常感谢，我尽力做到最好。我一定是在复制粘贴时错过了这一点。
text-align: justify 不会对齐最后一行。相反，它将向左对齐。您应该使用一些技巧来使最后一行合理。作为参考，试试这个链接：stackoverflow.com/questions/4771304/…

标签： html css text-alignment text-align

【解决方案1】：

通过使用表格，它可以工作并在第二个单元格中设置两个 00，使数字具有相等的大小/空间。

【讨论】：

【解决方案2】：

问题是您使用的是inline-block，根据您的屏幕截图，它们看起来应该是块。这是基于您的屏幕截图的代码标记：

.bartext-container {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
  
.bartext {
  align-self: flex-start;
  background-color: #000;
  color: #fff;
  flex: 0 0 auto;
  margin-bottom: 15px;
  position: relative;
  padding: 15px;
  width: auto;
  
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
}

<div id="main" class="mainText">
  <div class="bartext-container">
    <div class="bartext" id="tabelFrisBar">  
       Totaal: 0<br>
       Kratjes: 0<br>
       Overige: 0
    </div>
    <div class="bartext" id="tabelFrisBarExtra">  
       Totaal: 0<br>
       Kratjes: 0<br>
       Overige: 0
    </div>
    <div class="bartext" id="tabelFrisBarExtra">  
       Totaal: 0<br>
       Kratjes: 0<br>
       Overige: 0
    </div>
  </div>
</div>

【讨论】：

这里看起来不错，但是当我将它复制到我自己的代码中时，它并没有奏效。我正在使用页面上的侧边栏，它重新调整宽度。另外，我也希望数字对齐。使用表格并将所有内容都向左对齐会更好吗？
你能在一个要点gist.github.com分享你的完整标记和css吗？

【解决方案3】：

尝试这样做。

  #main {
  transition: margin-left 0.1s;
  padding: 16px;
  display: flex;
  justify-content: center;
}

.mainText p {
  padding: 0 20px;
}

<div id="main" class="mainText">
  <p class="bartext" id="tabelFrisBar">Totaal: 0 Kratjes: 0 Overige: 0</p>
  <p class="bartext" id="tabelFrisExtra">Totaal: 0 Kratjes: 0 Overige: 0</p>
  <p class="bartext" id="tabelBierExtra">Totaal: 0 Kratjes: 0 Overige: 0</p>
</div>

【讨论】：