html - Bootstrap 3: Alignment of Close Icon

Question

Close Icon is acting weird.
Code

<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>

It's appearing like this:

Answer 1

图像高 21 像素，但li只有 20 像素高（由于字体），所以浮动重叠。一个简单且不显眼的修复方法是将li高度设置为 21px。

http://jsfiddle.net/pxHZ9/

你也可以clear在lis之后

http://jsfiddle.net/pxHZ9/1/

Answer 2

您必须将两个元素都向左浮动：

.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; }