如何更好地對齊內聯段落元素（沒有表格）

Question

我對 web 設計非常陌生，我想幫助在 web 頁面上對齊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 。 我可以稍微更改標記並添加 class 名稱，但我不想使用表格。 它看起來像這樣：

有人可以幫我嗎？ 謝謝！

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>

Answer 2

 .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; } } #num{ width: 5%; text-align:left; padding-block:initial; } #std{ text-align:left; }.cent{ margin-left: auto; margin-right: auto; }

 <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> <table class="cent"> <tr> <td id="std"><p class="normal">Orders Shipped Today:</td><td id="num">0</p></td> <td id="std"><p class="normal">Order&nbsp;Received: </td><td id="num">14</p></td> <td id="std"><p class="normal">Payment&nbsp;Declined: </td><td id="num">6</p></td></tr> <tr> <td id="std"><p class="normal">Payment&nbsp;Authorized: </td><td id="num">3</p></td> <td id="std"><p class="normal">Mgt&nbsp;Hold: </td><td id="num">6</p></td> <td id="std"><p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: </td><td id="num">3</p></td></tr> <tr> <td id="std"><p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: </td><td id="num">4</p></td> <td id="std"><p class="normal">HELP&nbsp;ME: </td><td id="num">1</p></td> <td id="std"><p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: </td><td id="num">2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p></td></tr> </table> </div>

 .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 { border: 1px unset; padding:7px; text-align:right; font-size: 12pt; margin-left: 20px; margin-right: auto; } 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; }.grid-container{ grid-template-columns: auto auto auto auto auto auto; display:grid; padding:10px; } }

 <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> <div class="grid-container"> <p class="normal">Orders Shipped Today:</p><p class="normal">0</p> <p class="normal">Order&nbsp;Received:<p class="normal">14</p> <p class="normal">Payment&nbsp;Declined:<p class="normal">6</p> <p class="normal">Payment&nbsp;Authorized:<p class="normal">3</p> <p class="normal">Mgt&nbsp;Hold:<p class="normal">6</p> <p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping:<p class="normal">3</p> <p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT:<p class="normal">4</p> <p class="normal">HELP&nbsp;ME:<p class="normal">1</p> <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping:</p><p class="normal">2</p></span><p class="normal"><span class="tiny-ps">Exped/Courier Sent to Shipping:2</span></p> </div> </div>

Answer 3

使用 CSS 的text-indent屬性。

p {
  text-indent: 45px
}

將像素值調整為適合的值。 您還可以對響應式網站使用百分比值。

Answer 4

嘗試這個

Expedited/Courier Orders Sent to Shipping

你也可以放在桌子上

 .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> <table style="width:100%"> <tr> <td>Orders Shipped Today:</td> <td>0</td> <td>Order&nbsp;Received:</td> <td>14</td> <td>Payment&nbsp;Declined:</td> <td>6</td> </tr> <tr> <td>Payment&nbsp;Authorized:</td> <td>3</td> <td>Mgt&nbsp;Hold:</td> <td>6</td> <td>Order&nbsp;Sent&nbsp;to&nbsp;Shipping:</td> <td>3</td> </tr> <tr> <td>Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT:</td> <td>4</td> <td>HELP&nbsp;ME: 1</td> <td>1</td> <td>Payment&nbsp;Declined:</td> <td>6</td> </tr> </table> <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>

Answer 5

 .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; } } #num{ width: 5%; text-align:left; padding-block:initial; } #std{ text-align:left; }.cent{ margin-left: auto; margin-right: auto; }

 <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> <table class="cent"> <tr> <td id="std"><p class="normal">Orders Shipped Today:</td><td id="num">0</p></td> <td id="std"><p class="normal">Order&nbsp;Received: </td><td id="num">14</p></td> <td id="std"><p class="normal">Payment&nbsp;Declined: </td><td id="num">6</p></td></tr> <tr> <td id="std"><p class="normal">Payment&nbsp;Authorized: </td><td id="num">3</p></td> <td id="std"><p class="normal">Mgt&nbsp;Hold: </td><td id="num">6</p></td> <td id="std"><p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: </td><td id="num">3</p></td></tr> <tr> <td id="std"><p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: </td><td id="num">4</p></td> <td id="std"><p class="normal">HELP&nbsp;ME: </td><td id="num">1</p></td> <td id="std"><p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: </td><td id="num">2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p></td></tr> </table> </div>