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

我对网页设计很陌生,我想帮助对齐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>
    <p>Address&nbsp;Correction: 3</p>
    <p><span>Exped/Cour NOT Sent-Shipping: 5</span><span>Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
    <p><span>Pickup Orders Not Sent to Shipping: 1</span><span>Pickups Not Sent-Shipping: 1</span></p>
    <p><span>Liner Orders Not Sent to Shipping: 1</span><span>Liners Not Sent-Shipping: 1</span></p>
    <p>Orders Shipped Today: 0</p>
    <p>Order&nbsp;Received: 14</p>
    <p>Payment&nbsp;Declined: 6</p>
    <p>Payment&nbsp;Authorized: 3</p>
    <p>Mgt&nbsp;Hold: 6</p>
    <p>Order&nbsp;Sent&nbsp;to&nbsp;Shipping: 3</p>
    <p>Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: 4</p>
    <p>HELP&nbsp;ME: 1</p>
    <p><span>Expedited/Courier Orders Sent to Shipping: 2</span><span>Exped/Courier Sent to Shipping: 2</span></p>
  </div>
以上是如何更好地对齐内嵌段落元素(没有表格)的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>