Question

我有一堆<li>，我想对齐我放入其中的所有按钮。这是我对Bootstrap 3.0.0的尝试：

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

我只想让所有x对齐，但似乎基于<a>标记的长度，按钮与右对齐。我只想要与<a>标签长度无关，以正确对齐按钮。以下是

发生的事例

我只是想要它以便x和x垂直和右边正确对齐。我尝试在按钮上添加float:right，但这似乎无效。

Answer 1

尝试display: block和pull-right：

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

编辑：用div和display: block打包编辑2：确保li 不 inline。试试检查员

Answer 2

使用float: right时发生的事情是，元素上的间距溢出了父级，导致按钮在到达li元素末尾之前发生碰撞。尝试添加overflow: auto或为li元素指定高度。

Answer 3

在添加display: block时，使列表项float:right可能有助于按钮一直向右浮动，假设您的布局允许。

.list-unstyled {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.list-unstyled li {
  display: block;
  padding: 0.75rem 1rem;
  border: solid 1px rgba(0, 0, 0, 0.25);
  margin-bottom: 0.5rem;
}

.list-unstyled li a {
  text-decoration: none;
}

.close {
  float: right;
  background: none;
  border: none;
  cursor: pointer;
}

<ul class="list-unstyled">
  <li>
    <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    <a href="#">Fee</a>
  </li>
  <li>
    <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    <a href="#">Fi</a>
  </li>
  <li>
    <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    <a href="#">Foe</a>
  </li>
  <li>
    <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    <a href="#">Fum</a>
  </li>
</ul>

这里的嵌入式样式只是为了明白li在渲染时的呈现方式。

Answer 4

你可以用不同的方式实现它，我用position方法。首先尝试使用CSS选择器代替内联样式。见下文：

.style-selector {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 250px;
}
.style-selector > li {
  position: relative;
  padding-right: 25px;
  font-size: 14px;
  border: 1px solid #000;
  margin: 2px 0;
  padding: 5px 10px;
}
.style-selector > li a {
  text-decoration: none;
  line-height: 24px;
  font-size: 18px;
}
.style-selector > li .close {
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -12px;
  height: 24px;
  line-height: 24px;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<ul class="style-selector">
    <li ng-repeat="item in items">
        <a href="#" ng-click="clickItem(item)">{{item}}</a>
        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </li>
    <li ng-repeat="item in items">
        <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>

使li中的元素正确对齐？

4 个答案: