php - 使用 PHP 和 MySQL 进行列行对齐

Question

我希望它是这样的，对齐但与数据库中的信息不同:

显示如下:

<?php
  include_once('connection.php');


   $sql = "SELECT * FROM tblstdpro

ORDER BY StdID DESC limit 0, 8";



  $result = mysqli_query($conn,$sql);

  $count = 0;
  while($row = mysqli_fetch_array($result)){


     $StudentID="<a href='ProfileRecords.php?id=".$row['StdID']."'>".$row['StdID']."</a>";
   $StdName="<a href='ProfileRecords.php?id=".$row['StdID']."'>" . $row['Fname'] . ' ' . $row['Lname'] . "</a>";

  ?>
  <!--  Select distinct stdname, stdimage from tblstdpro order by stdid desc -->
          <div class="box-tools pull-right">

                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                    </button>
                  </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">

                  <ul class="users-list clearfix">
                    <li>
                      <img src="<?php echo $row['StdImage'];?>" width="125px" alt="Student Image">
                      <a class="users-list-name" href="#"><?php echo "$StdName" ?></a>
                      <span class="users-list-date"><?php echo "$StudentID" ?></span>
                    </li>

                    </li>
                   <?php 
                   } ?>
                  </ul>

                  <!-- /.users-list -->
                </div>
                <!-- /.box-body -->
                <div class="box-footer text-center">
                  <a href="javascript:void(0)" class="uppercase">View All Users</a>
                </div>
                <!-- /.box-footer -->
              </div>
              <!--/.box -->
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->

请告诉我应该添加的代码。

Answer 1

我认为您需要将 css 应用于 ul，以便 li 元素显示在行中而不是列中。这就是我想出的。希望这有帮助..

         <style>
         /***Student list***/

        ul#stdList{
        width:fit-content;
        margin:15px auto 10px auto;
        overflow:hidden;
        }

        ul#stdList li{
        letter-spacing:.05em;
        color:#0a93cd;
        display:block;
        float:left;
        font:24px arial;
        padding:7px 7px;
        margin:0px 4px;
        text-align:center;
        }

        ul#stdList li:hover{
        border-color:#444;
        }

        .img-circle {
        border-radius: 50%;
        }

     </style>

HTML:

                <ul class="users-list clearfix" id="stdList">
                <li>
                  <img class="img-circle" src="images/std2.jpg" width="125px" alt="Student Image"><br/>
                  <a class="users-list-name" href="#">Name</a>
                  <span class="users-list-date">Student Id</span>
                </li>
                                   <li>
                  <img class="img-circle" src="images/std3.jpg" width="125px" alt="Student Image"><br/>
                  <a class="users-list-name" href="#">Name</a>
                  <span class="users-list-date">Student Id</span>
                </li>
                <li>
                  <img class="img-circle" src="images/std4.jpg" width="125px" alt="Student Image"><br/>
                  <a class="users-list-name" href="#">Name</a>
                  <span class="users-list-date">Student Id</span>
                </li>
                <li>
                  <img class="img-circle" src="images/std5.jpg" width="125px" alt="Student Image"><br/>
                  <a class="users-list-name" href="#">Name</a>
                  <span class="users-list-date">Student Id</span>
                </li>                    
            </ul>