Column row align using PHP and MySQL - php

Question

I want it to be like this, the alignment but different info from database:
It shows like this:
<?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">
View All Users
</div>
<!-- /.box-footer -->
</div>
<!--/.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
Please show me the code I should add.

Answer 1

I think you need to apply css to ul so that li items are displayed in line and not in a column. This is what I have come up with. Hope this helps..
<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

Look closely to the position of your while block. You're not looping a single user (the li element), but a whole bunch of code before and after that. Amongst others the general toolbar buttons, and the whole list itself.