FIDDLE

Question

我有一个容器，我想在左边显示一些项目，并想在右侧放置一个Cart图标。我尝试了这个，但没有工作，这里有什么不对吗？

文字和图片都有单独的链接。

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

Answer 1

FIDDLE

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

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

然后，您需要将float:right;从.showcase li.item span.pic img移至：

span.pic{
    float:right;
}

请注意，这是基本前提，您应该使用clearfix或删除已完成代码的inline清除样式。

请参阅此FIDDLE with clearfix已实施。

Answer 2

1）<h1>和<a>标记是块级元素，因此它们占据整个宽度，因此，给出内联块

CSS：

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

2）您已为float:right内的img标记提供span，因此它会在范围内浮动而不是您的li，所以您需要为span标签

CSS：

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

Answer 3

您的href链接有display:block

将display:inline-block更改为pic，h1和href链接

检查http://jsfiddle.net/raunakkathuria/MTHuP/3/

Answer 4

我已经更新了你的html和css，你需要移动标签上方的span选项卡。检查这里的小提琴

<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/

在Li标签内部左侧和右侧浮动，每个都有单独的锚

HTML

CSS

4 个答案:

FIDDLE