Bootstrap 3: Выравнивание значка Закрыть

Question

Закрыть Значок действует странно.
Код

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

Он появляется как это:

Answer 1

Изображение 21px в высоту, но li только 20px в высоту (из-за шрифта), так что поплавки перекрываются. Простое и ненавязчивое исправление - это просто установить высоту li на 21px.

http://jsfiddle.net/pxHZ9/

Вы могли бы также clear после li s

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