如何更好地对齐内嵌段落元素(没有表格)
我对网页设计很陌生,我想帮助对齐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 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 Received: 14</p>
<p>Payment Declined: 6</p>
<p>Payment Authorized: 3</p>
<p>Mgt Hold: 6</p>
<p>Order Sent to Shipping: 3</p>
<p>Pending Mgt Approval for PMT: 4</p>
<p>HELP ME: 1</p>
<p><span>Expedited/Courier Orders Sent to Shipping: 2</span><span>Exped/Courier Sent to Shipping: 2</span></p>
</div>