如何让<li>元素内的按钮正确右对齐？

嘿，我来帮你搞定这个按钮右对齐的需求～你现在用float:right其实方向是对的，但结合Bootstrap 3的特性，我们可以用更规范、更稳定的方式实现，还能避免一些潜在的布局问题。

方案1：用Bootstrap内置类（最推荐） #

Bootstrap 3自带了pull-right类专门用于右浮动元素，比自己写行内样式更符合框架规范，而且框架已经帮我们处理了浮动的兼容性。另外，浮动元素会脱离文档流，可能导致父元素<li>高度塌陷，所以给<li>加上clearfix类就能解决这个问题。

修改后的代码如下：

<ul style="list-style-type: none;">
  <li ng-repeat="item in items" class="clearfix">
    <button type="button" class="close pull-right" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <a href="#" ng-click="clickItem(item)">{{item}}</a>
  </li>
</ul>

方案2：用Flex布局（更现代的方式） #

如果不想用浮动，也可以借助Flex布局来实现按钮右对齐，这种方式不用处理浮动塌陷的问题，布局更稳定。我们可以给<li>加一个自定义类，然后写少量CSS：

<style>
  .list-item-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* 可选，给列表项加间距 */
  }
</style>

<ul style="list-style-type: none; padding-left:0;">
  <li ng-repeat="item in items" class="list-item-flex">
    <a href="#" ng-click="clickItem(item)">{{item}}</a>
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </li>
</ul>

这里把链接放在前面，按钮放在后面，通过justify-content: space-between让两者分别靠左右两侧，align-items: center确保垂直居中，视觉效果更好。

小提示 #

如果你的列表项内容很长，担心和按钮重叠，可以给链接加个margin-right（比如style="margin-right: 25px;"），或者直接用Flex布局的方案，它会自动让内容和按钮保持合理间距。

内容的提问来源于stack exchange，提问作者user1871869