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”与left，“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:centre'>" . $toprow2['EmployeeName'] . "</div><div style ='text-align:right'>" . $toprow2['Total_points_Rewarded'] . "</div>";

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

第一个块是排名，然后是姓名和最后一个点 - 我试图回应的三个字段。

css用于上述情况：

 li mark {
display: inline-block;
   justify-content: space-between;
 }
 li mark div {
         display: block;
         margin: 4px;
         padding: 5px;
         min-height: 100px;
         border: 1px solid #eebb55;
         border-radius: 7pt;
         background: grey;
 }

@Abhay有一个很好的解决方案：css aint在这里工作，不过

现状：

Answer 1

使用flex：

  echo  "<div class='parent-div'><div class='rank'>" . $toprow2['overallRank'] . "</div><div class='name'>" . $toprow2['EmployeeName'] . "</div><div class='points'>" . $toprow2['Total_points_Rewarded'] . "</div></div>";

你的CSS：

.parent-div{
    display: -webkit-flex; /* Safari */
    display: flex;
}
.rank,.name,.points{
    width:33%;
}
.name{
    text-align: center;
}
.points{
    text-align: right;
}

小工作前：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
    .parent-div{
        display: -webkit-flex; /* Safari */
        display: flex;
    }
    .rank,.name,.points{
        width:33%;
    }
    .name{
        text-align: center;
    }
    .points{
        text-align: right;
    }
    </style>
</head>
<body>
    <div class="parent-div">
        <div class='rank'>Rank</div>
        <div class='name'>Name</div>
        <div class='points'>Points</div>
    </div>

    <div class="parent-div">
        <div class='rank'>Rank</div>
        <div class='name'>Name</div>
        <div class='points'>Points</div>
    </div>

    <div class="parent-div">
        <div class='rank'>Rank</div>
        <div class='name'>Name</div>
        <div class='points'>Points</div>
    </div>
</body>
</html>

如果继续span：

echo  "<div class='parent-div'><span class='rank'>" . $toprow2['overallRank'] . "</span><span class='name'>" . $toprow2['EmployeeName'] . "</span><span class='points'>" . $toprow2['Total_points_Rewarded'] . "</span></div>";

试试这个CSS：

.parent-div{
        display: -webkit-flex; /* Safari */
        display: flex;
    }
    .rank,.name,.points{
        display:block;
        width:33%;
    }
    .name{
        text-align: center;
    }
    .points{
        text-align: right;
    }

请注意我已经给所有三个跨度容器div上课了parent-div。

我希望它有所帮助

Answer 2

为什么不使用

＆＃13;

 li mark {

   display: inline; /* don't use inline-block */
   justify-content: space-between;
 }
 li mark div {
         float: left; /* here you put the float so it can be after the first li mark */
         display: block;
         margin: 4px;
         padding: 5px;
         min-height: 100px;
         border: 1px solid #eebb55;
         border-radius: 7pt;
         background: grey;
 }

 li mark div:first-child {
      float: left; /* it will put your first div in left side */
 }
 li mark div:last-child {
      float: right; /* it will be in the right side */
 }

＆＃13;

另外，为什么不删除宽度。例如，在上面的类中没有它，这意味着宽度为100％，您可以将其调整为width: 50%一半。

回显列表中的项目并对齐它们

2 个答案: