Html 引导程序3：关闭图标的对齐

关闭图标的行为很奇怪。
代码

<div class="well sidebar-nav">

            <ul class="list-unstyled">
              <li>File Uploaded</li>
              <li><a href="#">File 1</a> <button type="button" class="close" aria-hidden="true">&times;</button></li>
              <li><a href="#">File 2</a> <button type="button" class="close" aria-hidden="true">&times;</button></li>
              <li><a href="#">File 3</a> <button type="button" class="close" aria-hidden="true">&times;</button></li>
            </ul>
          </div>

上传的文件
&时代
&时代
&时代

看起来是这样的：

 .list-unstyled li { zoom:1; position:relative }
 .list-unstyled li:after { content:""; display:table; clear:both; }

---

图像的高度为21px，但

li

仅为20px（由于字体），因此浮动重叠。一个简单而不引人注目的修复方法是将

li

高度设置为21px

您还可以在

li

s之后

清除

两个元素必须向左浮动：

.list-unstyled li a,
.list-unstyled li button { float:left; }

------------------------------------------------或

可以将第一个元素向左浮动，第二个元素向右浮动

.list-unstyled li a { float:left: }
.list-unstyled li button { float:right; }

之后，必须按如下方式清除浮动：

 .list-unstyled li { zoom:1; position:relative }
 .list-unstyled li:after { content:""; display:table; clear:both; }

工作完美。谢谢