CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Bootstrap 3: Alignment of Close Icon

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:

enter image description here

Upvotes: 1

Views: 118

Answers (2)

psd2htmldepot
psd2htmldepot

Reputation: 192

You must float to the left the both elements:

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

------------------------------------------------ or

You can float the first element to the left and the second to the right

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

after that you must clear the float like this:

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

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

The image is 21px tall, but the li is only 20px tall (due to the font) so the floats overlap. A simple and unobtrusive fix is simply to set the li height to 21px.

http://jsfiddle.net/pxHZ9/

You could also clear after the lis

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

Upvotes: 2

Related Questions