列の行は、私はそれはこのようになりたい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

私はli項目が列ではなく列に表示されるようにulにcssを適用する必要があると思います。これは私が思いついたものです。この情報がお役に立てば幸いです。..

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

Answer 2

はあなたのwhileブロックの位置に密接に見て。あなたは単一のユーザ（li要素）をループしているわけではありませんが、その前後にコードがたくさんあります。その中には一般的なツールバーボタンやリスト全体があります。