列列對齊使用PHP和MySQL

我希望它是這樣的，從數據庫中比對，但不同的信息：列列對齊使用PHP和MySQL

它這樣表示：

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

請給我看我應該添加的代碼。

來源

2017-10-13 Byron Mataya

你能顯示預期的輸出是什麼嗎？並顯示它實際顯示的內容？直覺本能地說，ORDER BY不會做你認爲的事情。 –

我認爲你需要將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>

來源

2017-10-13 08:14:36

仔細觀察你的while塊的位置。你不是循環一個用戶（li元素），而是循環前後的一大堆代碼。其中包括一般的工具欄按鈕，以及整個列表本身。

來源

2017-10-13 11:32:32 giorgio

非常感謝 –

列列對齊使用PHP和MySQL

回答

相關問題