使用 PHP 和 MySQL 进行列行对齐答案

【问题标题】：Column row align using PHP and MySQL使用 PHP 和 MySQL 进行列行对齐
【发布时间】：2017-10-13 19:32:32
【问题描述】：

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

显示如下：

<?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 -->

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

【问题讨论】：

你能显示预期的输出是什么吗？并显示它实际显示的内容？直觉告诉我们，ORDER BY 并没有像你想象的那样做。

标签： php css mysql

【解决方案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>

【讨论】：

【解决方案2】：

仔细查看while 块的位置。您不是循环单个用户（li 元素），而是循环之前和之后的一大堆代码。其中包括通用工具栏按钮，以及整个列表本身。

【讨论】：