html – 在Li Tag内侧浮动并且每个都有单独的锚

概述我有一个容器,我想在左边显示一些项目,并想在右侧放置一个Cart图标.我尝试了这个,但没有工作,这里有什么不对吗？ Text和Image都有单独的链接. Fiddle HTML <div class="showcase"> <ul> <li class="item"> <h1><a href="#">Item 1 + Star 1 我有一个容器,我想在左边显示一些项目,并想在右侧放置一个Cart图标.我尝试了这个,但没有工作,这里有什么不对吗？

Text和Image都有单独的链接.

Fiddle

HTML

<div >    <ul>        <li >            <h1><a href="#">Item 1 + Star 1                    <small>                        <del>Rs. 6000</del>                        <span> Rs. 3000</span>                    </small>                </a>            </h1>            <span ><a href="#"><img src="https://cdn0.iconfinder.com/data/icons/iicon/512/buy-Cart-48.png" alt=""></a></span>        </li>        <li >            <h1><a href="#">Item 2 + Star One                    <small>                        <del>Rs. 6000</del>                        <span> Rs. 3000</span>                    </small>                </a>            </h1>            <span ><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;}

解决方法 FIDDLE

首先,您需要在浮动元素之后添加一个清除以恢复文档流程：

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

然后你需要移动浮动：右;从.showcase li.item span.pic img into：

span.pic{    float:right;}

请注意,这是基本前提,您应该使用clearfix或删除已完成代码的内联清除样式.

见FIDDLE with clearfix已实施.

总结

以上是内存溢出为你收集整理的html – 在Li Tag内侧浮动并且每个都有单独的锚全部内容，希望文章能够帮你解决html – 在Li Tag内侧浮动并且每个都有单独的锚所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。