如何将引导程序的徽章与 <li> 内的 AJAX 对齐

Question

我目前正在开发一个网站，客户用户可以在该网站上请求卡车。 客户请求卡车时会有通知。只有管​​理员可以看到。但是当我开始使用 AJAX 进行实时通知时，我无法正确对齐徽章。因为我必须将徽章（已经使用 mysql）放在 <div> 标记内。

---

请看图。 这就是我想要发生的事情 (Please click) 正如您在图片上看到的，那里的徽章已正确对齐。但这是我现在拥有的： (Please click) 您的帮助将不胜感激。这是我的代码：

使用 AJAX 编写脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>  

<script>
// <!--Realtime AJAX CODE-->

function ajax(){

var req = new XMLHttpRequest();

req.onreadystatechange = function(){

if(req.readyState == 4 && req.status == 200){
            // (badge) id name of div
document.getElementById('badge').innerHTML = req.responseText; 
} 
}
req.open('GET','badge.php',true); //(badge.php) file to fetch requests
req.send();

}
setInterval(function(){ajax()},1000);

// <!--End-->
</script>

引导程序：

<!-- start of NAV TABS HERE -->
<ul class="nav nav-tabs">
  <li role="presentation"><a href="index.php" title="Home page">Home</a>
    </li>
  <li role="presentation" class="active"><a href="trucks.php" 
      title="Trucks">Trucks</a></li>
  <li role="presentation"><a href="suppliers.php" 
      title="Suppliers">Suppliers</a></li>
  <li role="presentation"><a href="clients.php" title="Clients">Clients</a>
     </li>
  <li role="presentation"><a href="services.php" 
      title="Services">Services</a></li>
  <li role="presentation"><a href="accountspayables.php" title="Uploaded 
      Files">Uploaded Files</a></li>
  <li role="presentation"><a href="maintenance.php" 
      title="Maintenance">Maintenance</a></li>
  <!--  DROPDOWN start -->
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" 
      aria-haspopup="true" aria-expanded="false">
      About us <span class="caret"></span>
    </a>
 <ul class="dropdown-menu">
   <li role="presentation"><a href="contactus.php" title="Contact 
      us">Contact us</a></li>
   <li role="presentation"><a href="aboutus.php" title="About us">About 
      us</a></li>
 </ul>
 </li>
 <!-- END OF DROPDOWN -->

<!--  TRUCK REQUESTS START -->
 <li role="presentation"><a href="truckrequest.php" title="Truck request">
  <i class="fa fa-truck" style="font-size:21px;"></i>
    <!-- container for badge.php -->
    <div id="badge"></a></div>
 </li>

badge.php:

<?php 
$conn = mysqli_connect("localhost", "root", "", "crb");
$query = "SELECT COUNT(*) AS total FROM truckrequest WHERE STATUS=0";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)) {
  //fetch number of pending requests from table
?>
  <span class="badge"><?= $row["total"] ?></span></a>
<?php  }
?>

Answer 1

您可以使用弹性框来对齐项目。但是，您需要为 li 分配一个单独的类，因为该角色在不同的地方使用。

li {
  list-style: none;
}

li[role="presentation"] {
  display: flex;
}

#badge {
margin-left: .5em;
background: red;
border: medium solid red;
border-radius: 100%;
width: 1em;
height: 1em;
text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<li role="presentation">
  <a href="truckrequest.php" title="Truck request">
    <i class="fa fa-truck" style="font-size:21px;"></i></a>
  <!-- container for badge.php -->
  <div id="badge">5</div>
</li>

Answer 2

我认为你的代码应该如下： 引导程序：

 <li role="presentation"><a href="truckrequest.php" title="Truck request">
  <i class="fa fa-truck" style="font-size:21px;"></i>
    <!-- container for badge.php -->
    <div id="badge"></div>
 </li>

badge.php

<?php 
$conn = mysqli_connect("localhost", "root", "", "crb");
$query = "SELECT COUNT(*) AS total FROM truckrequest WHERE STATUS=0";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)) {
  //fetch number of pending requests from table
?>
  <span class="badge"><?= $row["total"] ?></span>
<?php  }
?>

从两者中删除锚 (<a>) 标记的关闭。可能会解决这个问题。

Answer 3

只需使用以下 CSS 并使用以下内容更新您的 HTML

<li role="presentation"><a href="truckrequest.php" title="Truck request"><i class="fa fa-truck" style="font-size:21px;"></i>
 <div id="badge"></div></a>
</li>

.nav-tabs li a i , .nav-tabs li a #badge {
    display: inline-block;
    vertical-align: middle;
}