HTML CSS 文本对齐方式无法正常工作

Question

        <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”与我想要的不一致。有人知道如何解决这个问题吗？

编辑：

通过使用 table 它可以工作，并使 makes 中的两个 00 具有相等的 size/space。我要感谢所有帮助过的人me:D

Answer 1

尝试这样做。

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

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

Answer 3

通过使用 table 它起作用并在第二个单元格中制作两个 00，使数字具有相等的 size/space。

HTML CSS 文本对齐方式无法正常工作

HTML CSS Text Align justify isn't working correctly

html

css

text-align

text-alignment

编辑：