HTML CSS Выравнивание текста по ширине работает неправильно - PullRequest
Новая
       45

HTML CSS Выравнивание текста по ширине работает неправильно

1 голос
/ 14 июля 2020 

        <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

Ответы [ 3 ]

0 голосов
/ 14 июля 2020

Проблема в том, что вы используете 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>
0 голосов
/ 18 июля 2020

Используя таблицу, он работает и делает два 00 во второй ячейке, заставляя числа иметь одинаковый размер / пространство.

0 голосов
/ 14 июля 2020

Попробуйте это сделать. 

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