html - 我如何垂直对齐 Bootstrap 下拉列表中的元素，这些元素由于前面的图标宽度不同而未对齐？

Question

我有一个 Bootstrap 4 下拉菜单，其可点击元素由一个图标和图标旁边的短文本组成。我想让所有元素的图标和文本对齐。自然地，我试着用一张 table 来做这件事。不幸的是，Bootstrap 的 dropdown-item 类似乎会干扰表格布局，如此 JSfiddle 所示。 :

HTML:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <table class="clickable-rows">
      <tbody>
        <tr class="dropdown-item" data-href="#">
          <th><i class="fa fa-credit-card-alt"></i></th>
          <td>Credit card</td>
        </tr>
        <tr class="dropdown-item" data-href="#">
          <th><i class="fa fa-eur"></i></th>
          <td>Cash</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Javascript:

$( document ).ready(function() {
  $('table.clickable-rows tr').click(function() {
    window.location = $(this).data('href');
  });
});

CSS:

table.clickable-rows td:hover {
  cursor: pointer;
}

这给了我:

取而代之的是，我想让 Credit card 和 Cash 对齐，如红线所示，以及在它们的列中居中的图标。我怎样才能做到这一点？

注意:CSS 和 JS 代码与问题没有直接关系。他们确保整行表现得像一个可点击的链接。我将它们包括在内只是为了展示一个功能齐全的示例。

Answer 1

The internet关于为什么不使用 <table /> 有足够的发言权构造您的 HTML 元素，所以我不会在这里重复。

您的问题可以通过在图标上设置固定宽度轻松解决，或者使用 FontAwesome 的 .fa-fw 更好。 fixed width class . FontAwesome 图标在 i.fa 中默认居中对齐标签。

无需设置cursor: pointer; CSS，无需编写 JavaScript 即可获取 data-href因为.dropdown-item现在是真正的 anchor 标签。

JSFiddle 演示:https://jsfiddle.net/davidliang2008/6s18j09L/12/

现场演示...

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown button</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">
      <i class="fas fa-credit-card fa-fw"></i> Credit card
    </a>
    <a class="dropdown-item" href="#">
      <i class="fas fa-euro-sign fa-fw"></i> Cash
    </a>
  </div>
</div>



<!-- Demo CSS libs -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

<!-- Demo jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>