html - ブートストラップ 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

画像の高さは 21 ピクセルですが、li(フォントのために) 高さが 20 ピクセルしかないため、フロートが重なっています。シンプルで邪魔にならない修正方法は、li高さを 21px に設定することです。

http://jsfiddle.net/pxHZ9/

のclear後にもできますli

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

Answer 2

両方の要素を左にフロートする必要があります。

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

- - - - - - - - - - - - - - - - - - - - - - - - また

最初の要素を左に、2 番目の要素を右に浮動させることができます

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