php - 对齐 php 变量的字段

Question

我有一个 php 来回显三个变量字段:

<li>
     <mark>  <?php  while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
     echo   $toprow2['overallRank']     ."&nbsp;&nbsp;&nbsp;".$toprow2['EmployeeName']     ."&nbsp;&nbsp;&nbsp;".$toprow2['Total_points_Rewarded']."<br/>";}  ?>
     </mark>
</li>

在列表的这三个变量中，我想将第一个字段“overallRank”向左对齐，“EmployeeName”向中心对齐，“Total_points_Rewarded”向最右对齐。

下面是我为第一个字段尝试的代码:

<li>
    <mark>  <?php  while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
                          echo  "<div style = "text-align=left" ."$toprow2['overallRank'] "</div>"."&nbsp;&nbsp;&nbsp;".$toprow2['EmployeeName'] ."&nbsp;&nbsp;&nbsp;".$toprow2['Total_points_Rewarded']."<br/>";}  ?>
    </mark>
</li>

当我使用三个 div 时:

echo  "<div style ='text-align:left'>" . $toprow2['overallRank'] . "</div><div style ='text-align:left'>" . $toprow2['EmployeeName'] . "</div><div style ='text-align:right'>" . $toprow2['Total_points_Rewarded'] . "</div>";

我无法对齐它们:当前情况:

第一个 block 是排名，然后是名称和最后一点 - 我试图在此处回显这三个字段。

Answer 1

您可以使用 <div> 包装您的内容元素并使用 Flexbox 来对齐您的元素，例如像这样:

li mark {
  display: flex;
  justify-content: space-between;
}
li mark div {
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<li>
  <mark>
    <div>some content</div>
    <div>some content</div>
    <div>some content</div>
  </mark>
</li>

您的 PHP 代码可能如下所示:

<li>
    <mark>
        <?php  while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
            echo  "<div>" . $toprow2['overallRank'] . "</div><div>" . $toprow2['EmployeeName'] . "</div><div>" . $toprow2['Total_points_Rewarded'] . "</div>";
        } ?>
    </mark>
</li>

参见MDN欲了解更多信息或CSS-tricks一个很好的指南。