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

只需使用以下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;
}

Answer 2

我认为您的代码应如下所示：的自举：

<li role="presentation"><a href="truckrequest.php" title="Truck request"> <i class="fa fa-truck" style="font-size:21px;"></i>  <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

您可以使用弹性工具箱对齐项目。但是，您需要为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>

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

3 个答案: