浮动左和里面李标签与每个独立的锚 [英] Float Left and RIght on inside Li Tag with seperate anchor each
问题描述
我有一个容器,我想在左边显示一些项目,并想在右侧放置一个Cart图标。
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.
<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
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;}
推荐答案
FIDDLE
首先,您需要在浮动元素后添加清除以恢复文档流程:
FIDDLE
First off you need to add a clear after your floated elements to resume the document flow:
div style ='clear:both;'>< / div>
然后你需要移动 float :right;
从 .showcase li.item span.pic img
into:
Then you need to move float:right;
from .showcase li.item span.pic img
into:
span.pic{
float:right;
}
请注意,这是一个基本前提, a href =http://nicolasgallagher.com/micro-clearfix-hack/ =nofollow> clearfix 或删除 inline
清除样式
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.
请参阅 FIDDLE with clearfix > a>已实施。
这篇关于浮动左和里面李标签与每个独立的锚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!