时间戳

首页 > 解决方案 > 右对齐单个元素

html - 右对齐单个元素

问题描述

我想将下拉列表中的单个元素与 Bootstrap 5 右对齐。通常我使用“justify-content-end”，但这并没有这样做。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

这只是引导主页中的示例。我在 <li> 和 <a> 标记处尝试了“justify-content-end”。例如，我只希望“另一个动作”右对齐，其他两个左对齐。

标签： htmlcsstwitter-bootstrapalignmentbootstrap-5

解决方案

每个具有类的元素dropdown-item都设置为display: block（意味着它占据了父元素的整个宽度）。如果你想让“Another Action”的文本右对齐，意味着你需要text-end在<a>元素上设置一个类

推荐阅读