如何在html/css中对齐文本

Question

大家好，我是HTML/CSS的新手，我想知道如何才能像这样

N_git_commit: 122e1  DC_git_commit: 1231
N_uptime:2190384987128421 DC_uptime: 2193821042141

转到

N_git_commit: 122e1       DC_git_commit: 1231
N_uptime:2190384987128421 DC_uptime: 2193821042141enter code here

我目前已经将其设置为每一行都在一个div下，例如

<div>
  <span> N_git_commit:201213 </span>
  <span> DC_git_commit:1231  </span>
</div>

等等。任何帮助都将不胜感激！

Answer 1

你可以试试CSS Tables

​

.random-table {
  display: table;
  border: 1px solid black;
}

.random-row {
  display: table-row;
}

.random-row span {
  display: table-cell;
  padding: 5px;
}

.random-row > span:first-child {
  background: #EEEEEE;
}

<div class="random-table">
  <div class="random-row">
    <span> N_git_commit:201213 </span>
    <span> DC_git_commit:1231  </span>
  </div>
  <div class="random-row">
    <span> N_uptime:2190384987128421 </span>
    <span> DC_uptime: 2193821042141enter </span>
  </div>
</div>

​