html - 如何在用户图标上 float ？

请帮助我完成这个项目，我想向右浮动或在右侧显示用户图标。我正在使用来自getbootstrap.com的主引导程序

    [![<ul class="nav nav-t][1]][1]abs">
  [<li role="presentation"><a href="index][1].php">Home</a></li>
  <li role="presentation"><a href="trucks.php">Trucks</a></li>
  <li role="presentation"><a href="suppliers.php">Suppliers</a></li>
  <li role="presenation"><a href="accountspayables.php">Uploaded Files</a></li>
  <li role="presentation" class="active"><a href="maintenance.php">Maintenance</a></li>
  <li role="presentation"><a href="login.php"><span class="glyphicon glyphicon-user" aria-hidden="true"></a></li>
</ul>

最佳答案

首先，您需要使用<span>关闭</span>

如果您想知道此引导程序类中的内容，请使用pull-right：

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
  <li role="presentation"><a href="index][1].php">Home</a></li>
  <li role="presentation"><a href="trucks.php">Trucks</a></li>
  <li role="presentation"><a href="suppliers.php">Suppliers</a></li>
  <li role="presenation"><a href="accountspayables.php">Uploaded Files</a></li>
  <li role="presentation" class="active"><a href="maintenance.php">Maintenance</a></li>
  <li role="presentation" class="pull-right"><a href="login.php"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
</ul>