Float Left and RIght on inside Li Tag with seperat

问题:

I have a container, where I want to display some items on left and want to put a Cart icon on right side. I tried this, but not working, whats wrong here?

Both Text and Image have separate links.

Fiddle

HTML

<div class="showcase">
    <ul>
        <li class="item">
            <h1><a href="#">Item 1 + Star 1
                    <small>
                        <del>Rs. 6000</del>
                        <span> Rs. 3000</span>
                    </small>
                </a>
            </h1>
            <span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>
        </li>
        <li class="item">
            <h1><a href="#">Item 2 + Star One
                    <small>
                        <del>Rs. 6000</del>
                        <span> Rs. 3000</span>
                    </small>
                </a>
            </h1>
            <span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>
        </li>
    </ul>
</div>

CSS

.showcase ul {list-style-type: none;padding: 0;margin: 0 5px;}
.showcase li.item {border-bottom:1px solid #000;}
.showcase li.item a {display: block;color:#000;clear:both;}
.showcase li.item span.pic img {float: right;width:50px;height:50px;float:right;}

.showcase li.item h1 {text-transform: uppercase;font-family: 'fauna_oneregular' serif;white-space: normal;font-size: 0.8em;}
.showcase li.item h1 a {color:#000 !important;text-decoration: none}
.showcase li.item h1 small {color:#a51c10;display: block;}
.showcase li.item h1 small span {color:#79a510;}

回答1:

FIDDLE

First off you need to add a clear after your floated elements to resume the document flow:

<div style='clear:both;'></div>

Then you need to move float:right; from .showcase li.item span.pic img into:

span.pic{
    float:right;
}

Note that this is the basic premise, you should either aim to use a clearfix or remove the inline clear style for your finished code.

See this FIDDLE with clearfix implemented.

回答2:

1)The <h1> and <a> tag are block level elements , hence they occupy the full width, so, give inline-block

CSS:

.showcase li.item a {display:inline-block;color:#000;clear:both;}
.showcase li.item h1 {display:inline-block;}

2) You have given float:right for the img tag inside the span, so it floats right inside the span and not for your li, so you need to give float right for the span tag

CSS:

.showcase li.item span.pic{float:right;}

回答3:

Your href link has display:block

Change display:inline-block to pic, h1 and href link

check http://jsfiddle.net/raunakkathuria/MTHuP/3/

回答4:

I have updated your html and css you need to move the span tab above the a tag. check the fiddle here

<li class="item">
<h1><span class="pic"><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>
  <a href="#">Aaryogyam 1.7A One + One
    <small>
    <del>Rs. 6000</del>
    <span> Rs. 3000</span>
    </small></a>
 </h1>

http://jsfiddle.net/MTHuP/4/