html - 如何更好地对齐内嵌段落元素(没有表格)

Question

我对网页设计很陌生，我需要帮助对齐 p网页上的元素，就像 Tab 在文字处理器中对齐东西一样。我有以下代码:

.tiny-ps {
  display: block;
}

.big-ps {
  display: none;
}

div.summary-container {
  border: 2px ridge;
  width: 100%;
  font-weight: normal;
  background-color: #eaeaea;
}

p {
  font-family: Tahoma, Arial, Helvetica;
}

p.highlight {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

p.highlight:nth-of-type(odd) {
  background-color: #800000;
}

p.highlight:nth-of-type(even) {
  background-color: #800020;
}

@media screen and (min-width: 500px) {
  div.summary-container {
    margin: 10px 0px;
  }
  p {
    font-size: 12pt;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  p.normal {
    display: inline;
    margin-right: 2%;
    font-size: 12pt;
  }
  p.highlight {
    display: block;
    margin: 2px 0px 2px 0px;
    font-size: 12pt;
  }
  .billName {
    display: block;
  }
  .Norm9 {
    font-size: 8pt;
  }
  .tiny-ps {
    display: none;
  }
  .big-ps {
    display: inline-block;
  }
}

<div class="summary-container">
    <p class="highlight">Address&nbsp;Correction: 3</p>
    <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
    <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
    <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
    <p class="normal">Orders Shipped Today: 0</p>
    <p class="normal">Order&nbsp;Received: 14</p>
    <p class="normal">Payment&nbsp;Declined: 6</p>
    <p class="normal">Payment&nbsp;Authorized: 3</p>
    <p class="normal">Mgt&nbsp;Hold: 6</p>
    <p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: 3</p>
    <p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: 4</p>
    <p class="normal">HELP&nbsp;ME: 1</p>
    <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: 2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p>
  </div>

我似乎无法弄清楚如何让段落中的文本与其他段落中的文本对齐，以及如何让数字彼此对齐。我想这样做而不必使用 table .我可以稍微更改标记并添加类名，但我不想使用表格。它看起来像这样:

有人可以帮我解决这个问题吗？谢谢!

Answer 1

您可以使用 css 'display:inline-block' 或 'display:inline-grid' 并提及宽度。

.tiny-ps {
  display: block;
}

.big-ps {
  display: none;
}

div.summary-container {
  border: 2px ridge;
  width: 100%;
  font-weight: normal;
  background-color: #eaeaea;
}

p {
  font-family: Tahoma, Arial, Helvetica;
}

p.highlight {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

p.highlight:nth-of-type(odd) {
  background-color: #800000;
}

p.highlight:nth-of-type(even) {
  background-color: #800020;
}

p.normal {
    display: inline-grid;
    width: 30%;
    float: left;
    font-size: 11px;
}

<div class="summary-container">
    <p class="highlight">Address&nbsp;Correction: 3</p>
    <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
    <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
    <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
    <p class="normal">Orders Shipped Today: 0</p>
    <p class="normal">Order&nbsp;Received: 14</p>
    <p class="normal">Payment&nbsp;Declined: 6</p>
    <p class="normal">Payment&nbsp;Authorized: 3</p>
    <p class="normal">Mgt&nbsp;Hold: 6</p>
    <p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: 3</p>
    <p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: 4</p>
    <p class="normal">HELP&nbsp;ME: 1</p>
    <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: 2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p>
  </div>